☰

Google Chrome - ビューポートを変更せずにズームする

tag-icon • tag-icon google-chrome google-chrome-extensions zoom
Google Chrome - ビューポートを変更せずにズームする

何かを見落としたか、質問の言い方がよくわからなかったのかもしれませんが、これについてオンラインで何も見つけることができませんでした。

ビューポートや Web サイトをまったく変更せずに、Chrome でズームインしたいです。つまり、Web サイトをズームインすると、レスポンシブ デザインによって移動したり、「正しい」サイズに拡大縮小したりすることなく、詳細をズームインできます。

これに対する Chrome 拡張機能、または Chrome でこのようなズーム機能を有効にする方法はありますか?

答え1

高精度タッチパッド（ほとんどの新しいラップトップにはこれが搭載されています）またはタッチスクリーンをお持ちの場合は、ピンチアウトしてズームできます。

答え2

この拡張機能はまさにあなたが探しているものです:カスタムページズーム

しかし残念なことに、ショートカットはありません。

追伸: この拡張機能は、何らかの理由でアクセスするすべての Web サイトへのデータ アクセスを要求することに注意してください。

答え3

macOSの場合
ウェブページを撮影します。ズームするには、Command キーと「+」ボタンを押します。

Windowsの場合
ウェブページを取得します。Ctrl キーを押したまま、マウス ホイールを上にスクロールします。

編集

1) システム環境設定 -> アクセシビリティに移動します。
2) ズームを選択し、「キーボードショートカットを使用してズームする」を有効にします
。 3) ショートカットを書き留めます。
4) デフォルトでは、ズームインの場合は⌥- ⌘- 、ズームアウトの場合は- - です。=⌥⌘-

答え4

ユーザーエージェント（Chrome、Firefox、Chrome for Androidなど）は、デフォルトでボディをビューポート（正確には視覚ビューポート）の100%に設定する動作をします。そのため、ウィンドウのサイズが変更されると、ビューポート（レイアウトとビジュアル）が変わり、常にフィットコンテンツが破損し、レスポンシブ デザインでレイアウトが変わるなど、望ましくない (常にではない) 結果が生じる可能性があります。

モバイルファーストのアプローチを使用している場合は、min-widthメディアクエリ内の body の を絶対値に設定し、min-device-widthまたは を使用してmax-device-widthメディアクエリをトリガーします。

これにより、ブラウザ ウィンドウのサイズが変更されたときではなく、メディア クエリでサイズが指定されているデバイスでコンテンツがレンダリングされたときにのみ、メディア クエリがトリガーされます。

例えば：

body {
width : 90%;
}

次のようなメディアクエリを使用します。

@media screen and (min-device-width: 960px) {

  body {
   width : 900px;
  }

// Other CSS Rules to apply when device width > 960px
}

これにより、レイアウトはモバイル デバイスではレスポンシブになりますが、ブラウザ ウィンドウのサイズを変更したりズームしたりしてもデスクトップではレスポンシブになりません。代わりに、コンテンツがズームまたはサイズ変更されると、水平スクロール バーが表示されます。

このアプローチを使用すると、タグの使用をスキップすることもできます<meta name="viewport" content="width=device-width, initial-scale=1" >（ただし、推奨されません）。

お役に立てれば！

関連情報