レスポンシブ Web デザイン -Viewport

Viewport とは？

viewport は、ユーザーのウェブページの表示領域です。

viewport は中国語に翻訳すると「视区」と呼ぶことができます。

モバイルブラウザーは、ページを仮想的な「ウィンドウ」（viewport）の中に配置します。通常、この仮想的な「ウィンドウ」（viewport）は画面よりも広いので、すべてのウェブページを小さなウィンドウに押し込む必要はありません（そうすると、モバイルブラウザー向けに最適化されていないページのレイアウトが崩れてしまいます）。ユーザーはパンやズームでウェブページのさまざまな部分を見ることができます。

Viewport の設定

モバイルウェブ向けに最適化されたページでよく使われる viewport の meta タグは、おおよそ次のようになります：

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

• width：viewport のサイズを制御します。600 のような値を指定するか、device-width のようにデバイスの幅（ズーム100%時のCSSピクセル単位）を表す特別な値を指定できます。
• height：width に対応し、高さを指定します。
• initial-scale：初期ズーム比率です。つまり、ページが最初にロードされたときのズーム比率です。
• maximum-scale：ユーザーがズームできる最大比率です。
• minimum-scale：ユーザーがズームできる最小比率です。
• user-scalable：ユーザーが手動でズームできるかどうか。

以下のサンプルは、モバイル端末で viewport を使用した場合と使用しない場合の効果を示しています：

サンプル1、viewport を追加しない場合：

サンプル2、viewport を追加する場合：

タブレットやスマートフォンでアクセスしている場合は、クリックして直接その効果を確認できます。