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

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

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

@viewport {
  width: device-width;
}

構文

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

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

記述子

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

min-width
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
max-width
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
width
min-widthmax-width の両方を設定するための一括指定です。
min-height
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
max-height
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
height
min-heightmax-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;
}

仕様書

仕様書 状態 備考
CSS Round Display Level 1
@viewport の定義
草案 viewport-fit 記述子を定義。
CSS Device Adaptation
@viewport の定義
草案 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応291 2 あり -ms- 3 なし410 -ms-

165

11.1 — 15 -o-

なし6
height descriptor29 ? なし10 -ms-

16

11.1 — 15

なし
max-height descriptor29 ? なし10 -ms-

16

11.1 — 15

なし
max-width descriptor29 ? なし10 -ms-

16

11.1 — 15

なし
max-zoom descriptor29 あり -ms- なし10 -ms- ? なし
min-height descriptor29 ? なし10 -ms-

16

11.1 — 15

なし
min-width descriptor29 ? なし10 -ms-

16

11.1 — 15

なし
min-zoom descriptor29 あり -ms- なし10 -ms- ? なし
orientation descriptor なし ? なし10 -ms- なし ?
user-zoom descriptor29 あり -ms- なし10 -ms- ? なし
viewport-fit descriptor ? ? ? ? ?11
width descriptor29 ? なし10 -ms-

16

11.1 — 15

なし
zoom descriptor29 ? なし10 -ms- 16 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4.429 あり -ms- 3 なし4 ? なし6 あり
height descriptor4.429 ? なし

16

11.1 — 15

なし あり
max-height descriptor4.429 ? なし

16

11.1 — 15

なし あり
max-width descriptor4.429 ? なし

16

11.1 — 15

なし あり
max-zoom descriptor ?29 あり -ms- なし ? なし ?
min-height descriptor4.429 ? なし

16

11.1 — 15

なし あり
min-width descriptor4.429 ? なし ? なし あり
min-zoom descriptor ?29 あり -ms- なし ? なし ?
orientation descriptor ? ? ? ?8 -o- ? なし
user-zoom descriptor ?29 あり -ms- なし ? なし ?
viewport-fit descriptor ? ? ? ? ?11 ?
width descriptor4.429 ? なし

16

11.1 — 15

なし あり
zoom descriptor4.461 ? なし37 ? なし

1. See Chromium bug 235457.

2. From version 29: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.

3. This feature is behind the Enable @-ms-viewport rules preference.

4. See Firefox bug 747754.

5. From version 16: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.

6. See WebKit bug 95959.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, dskmori, fscholz, storywriter
最終更新者: mfuji09,