ビューポート


レスポンシブ Web デザイン - ビューポート

ビューポートとは?

ビューポートは、ユーザーの Web ページの表示領域です。

ビューポートを中国語に翻訳すると、「ビューポート」と呼ばれます。

モバイルブラウザは、仮想「ウィンドウ」(ビューポート) にページを配置します。通常、この仮想「ウィンドウ」(ビューポート) は画面よりも広いため、各 Web ページを小さなウィンドウに押し込む必要はありません (これにより、モバイル ブラウザー用に最適化されていない Web ページのレイアウトを壊すなど)、ユーザーがパンやズームして Web ページのさまざまな部分を表示できるようになります。

ビューポートを設定する

モバイル Web ページ用に最適化されたページで一般的に使用されるビューポート メタ タグは、おおよそ次のとおりです: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • width: ビューポートのサイズを制御します。値 (600 の場合) を指定できます。特別な値。たとえば、device-width はデバイスの幅です (スケーリングが 100% の場合、単位は CSS ピクセルです)。

  • 高さ:幅に対応して、高さを指定します。

  • initial-scale: 初期スケーリング率、つまり、ページが初めてロードされたときのスケーリング率。

  • maximum-scale: ユーザーがズームできる最大比率。

  • minimum-scale: ユーザーがズームできる最小比率。

  • ユーザースケーラブル: ユーザーが手動でズームできるかどうか。

次の例は、モバイル端末でビューポートを使用した場合と使用しなかった場合の効果を示しています:

例 1、ビューポートは追加されていません

1.png

例 2、ビューポートを追加しています

2.png