2021.04.24

【HTML】ビューポート(viewport)

みいと

ビューポートとは

ビューポートとはブラウザの表示領域のことです。

ブラウザではビューポートのサイズに合わせてコンテンツが表示されます。

例えば、スマホなどはディスプレイの幅が狭いですがビューポートは980px程度に設定されているので、幅980pxの仮想的なウィンドウがつくられます。

幅980pxで見たときの見た目を、この仮想的なウィンドウに縮小して表示されることになります。

ビューポートはmeta要素で設定します。

ビューポートの設定方法

設定部分は下記のような設定ができます。

プロパティ	設定内容	設定値
width	ビューポートの幅	10,000pxまでの整数を指定可能。またはdevice-widthを指定するとデバイスの幅を設定できる。
height	ビューポートの高さ	10,000pxまでの整数を指定可能。またはdevice-heightを指定するとデバイスの高さを設定できる。
initial-scale	表示倍率の初期値	0.0～10.0の数値を指定。
minimum-scale	表示倍率の最小値	0.0～10.0の数値を指定。
maximum-scale	表示倍率の最大値	0.0～10.0の数値を指定。
user-scalable	ユーザーによる拡大縮小の可否	yesかnoを指定。デフォルトはyes。