HTML

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

みいと

ビューポートとは

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

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

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

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

ビューポートの説明

ビューポートの設定

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

ビューポートの設定方法

<meta name=”viewport” content=”設定”>

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

プロパティ設定内容設定値
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。

ビューポートは次の設定をすることが多いようです。

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

この設定では、ビューポートの横幅をデバイスと同じ幅に設定しています。

メディアクエリを使ってCSSを切り替えている場合でも、こうすることでデバイスの幅に合ったCSSが適用されます。

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました