viewportとは

viewportとは

viewportとは、コンテンツが表示される領域のことです。

デスクトップ向けのブラウザでは、viewportの大きさはウィンドウの大きさを変えることで変更ができます。しかし、スマートフォンのブラウザは、デスクトップのブラウザのように物理的な大きさを変更することができません。

そこでスマートフォンには、viewportの仮想的な大きさを変更する仕組みが用意されています。

iPhone、Androidでは、デフォルトのviewportの幅は980pxになっています。viewportの幅980pxでも物理的な画面の大きさは変わらないので、その分のコンテンツが縮小されて表示されることにんります。例えば、幅が500pxの画像をデフォルトの状態で表示すると、下のようになります。

これはXperia arcの解像度の横幅は480pxなのにもかかわらず、横幅500pxの画面の半分くらいに収まっていることがわかります。これは、viewportの幅が980pxになっているからです。このviewportの幅は、metaタグで設定することができます。

				<meta name="viewport" content="width=500px">
				

このように指定すると、viewportの幅が500pxになり、幅500pxのコンテンツはぴったり収まるように表示されます。

また、ここで指定できる値は、表のようなものがあり、これらはカンマ区切りで指定することができます。

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

widthの値に指定することができるdevice-widthは、デバイスの幅に合わせるという意味になります。例えば、Xperia arcの場合にはdevice-widthを指定すると、viewportの幅は480pxになります。

device-heightも同様で、Xperia arcの場合は854pxになります。