表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割がある。
Googleの推奨は以下の通り。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">- width：表示領域の幅。device-widthを指定すると端末画面の幅に合わせることができる（初期値は980px）。
- user-scalable：ズームの操作で、許可する（yes）・許可しない（no）の指定ができる（初期値はyes）。
- initial-scale：初期のズーム倍率で、倍率（minimum-scale～maximum-scale の範囲）指定ができる。「minimum-scale」は、倍率 （0～10 の範囲、初期値は 0.25）。「maximum-scale」は、倍率 （0～10 の範囲、初期値は 1.6）。
※minimum-scaleとinitial-scaleを組み合わせると縮小ができなくなる。
※PCサイトしかなくスマホサイトが無い場合はPCサイトをスマホで閲覧することになるので、その場合は<meta name=”viewport” content=”width=960″>を指定する。
レスポンシブ用のひな型HTML
viewportの設定でwidth=devaice-widthと指定することではじめてデバイスの物理的な幅に合わせて表示させることが可能。viewportの記述がないと多くのスマホ用ブラウザは画面幅を980px相当とみなして表示しようとする。
<meta name="viewport" content="width=device-width, initial-scale=1.0">