ビューポートとは 〜HTML

ビューポートについて

スマートフォンのブラウザではViewportという仮想ウインドウサイズが設定されています。
もう少しわかりやすい言葉で説明すると、スマートフォンの画面は本来の解像度で表示するのではなく、仮想の解像度で表示を行います。
つまり、表示画面を指定したサイズ（解像度）が見れるように拡大縮小して表示するということです。

ビューポートの指定をしないと、iOS 7のsafariでは980pxの幅サイズが画面内に表示されるように縮小されます。
また、Androidのブラウザでは800pxで表示されます。

ビューポートを設定しない例

View portではその表示サイズを指定することができます。
ビューポートの指定はmeta要素を使用して以下の例のようにcontentに値を設定します。

<meta name="viewport" content="width=device-width">

content=”width=device-width”はviewportの幅をデバイスのスクリーン幅に合わせるという意味です。
少し専門的に言うとビューポートをdensityに基づいて表示します。iOSでは320ピクセルの横幅になります。デバイスを横向きにした場合はiOSでは縦向きと同じ幅320ピクセルで表示されます。
＊densityとはこちらで解説します。
とりあえずこの指定をしておけば全てのデバイスの幅に最適化されます。

content=”width=320px”のように数字で指定することもできます。その場合は指定した横幅で表示されます。width=320pxとすれば320ピクセルで表示され、width=700pxとすれば700ピクセルで表示されます。スマートフォンの場合はデバイスのスクリーン幅がまちまちのため、単一の数字で指定する事は難しいです。width=device-widthで指定した方が的確で簡単になります。

以下はviewportの設定をwidth=device-widthにした例と数値を指定した例です。
サンプルはスマホで確認してください。

width=device-widthの場合

content=”width=device-width”のサンプル

width=960pxの場合

content=”width=960px”のサンプル

width=360pxの場合

content=”width=360px”のサンプル