@viewport

@viewport は CSS の @-規則で、文書を通して表示するためのビューポートを構成することができます。第一にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。

パーセント値で指定された長さは、初期ビューポートからの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。

モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。

@viewport {
  width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
}

構文

@-規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった記述子を含みます。

1.0 又は 100% のズーム倍率はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。

記述子

現時点では @viewport のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 @viewport は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。

min-width

文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。

max-width

文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。

width

min-width と max-width の両方を設定するための一括指定です。

min-height

文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。

max-height

文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。

height

min-height と max-height の両方を設定するための一括指定です。

zoom

ズームの初期値を設定します。

min-zoom

ズームの最小値を設定します。

max-zoom

ズームの最大値を設定します。

user-zoom

ユーザーがズーム倍率を変更できるか否かを制御します。

orientation

文書の向きを制御します。

viewport-fit

長方形ではないディスプレイでの文書の表示を制御します。

形式文法

@viewport {
  <group-rule-body>
}

例

@viewport {
  min-width: 640px;
  max-width: 800px;
}

@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}

@viewport {
  orientation: landscape;
}

仕様書

ブラウザーの互換性

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• <meta>、特に <meta name="viewport"> の項目
• モバイルブラウザーでのレイアウトを制御するために meta タグの viewport を使う