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 の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 29
補足 無効
完全対応 29
補足 無効
補足 See Chromium bug 235457.
無効 From version 29: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
Edge 完全対応 あり
接頭辞付き 無効
完全対応 あり
接頭辞付き 無効
接頭辞付き -ms- のベンダー接頭辞が必要
無効 This feature is behind the Enable @-ms-viewport rules preference.
Firefox 未対応 なし
補足
未対応 なし
補足
補足 See Firefox bug 747754.
IE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
無効
完全対応 16
無効
無効 From version 16: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
未対応 11.1 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 未対応 なし
補足
未対応 なし
補足
補足 See WebKit bug 95959.
WebView Android 完全対応 4.4Chrome Android 完全対応 29Edge Mobile 完全対応 あり
接頭辞付き 無効
完全対応 あり
接頭辞付き 無効
接頭辞付き -ms- のベンダー接頭辞が必要
無効 This feature is behind the Enable @-ms-viewport rules preference.
Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See Firefox bug 747754.
Opera Android ? Safari iOS 未対応 なし
補足
未対応 なし
補足
補足 See WebKit bug 95959.
Samsung Internet Android 完全対応 あり
height descriptorChrome 完全対応 29Edge ? Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Edge Mobile ? Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
max-height descriptorChrome 完全対応 29Edge ? Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Edge Mobile ? Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
max-width descriptorChrome 完全対応 29Edge ? Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Edge Mobile ? Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
max-zoom descriptorChrome 完全対応 29Edge 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera ? Safari 未対応 なしWebView Android ? Chrome Android 完全対応 29Edge Mobile 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android ?
min-height descriptorChrome 完全対応 29Edge ? Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Edge Mobile ? Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
min-width descriptorChrome 完全対応 29Edge ? Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Edge Mobile ? Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
min-zoom descriptorChrome 完全対応 29Edge 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera ? Safari 未対応 なしWebView Android ? Chrome Android 完全対応 29Edge Mobile 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android ?
orientation descriptor
実験的
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 未対応 なしSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android 完全対応 8
接頭辞付き
完全対応 8
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS ? Samsung Internet Android 未対応 なし
user-zoom descriptorChrome 完全対応 29Edge 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera ? Safari 未対応 なしWebView Android ? Chrome Android 完全対応 29Edge Mobile 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android ?
viewport-fit descriptor
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari 完全対応 11WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS 完全対応 11Samsung Internet Android ?
width descriptorChrome 完全対応 29Edge ? Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Edge Mobile ? Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
zoom descriptorChrome 完全対応 29Edge ? Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 61Edge Mobile ? Firefox Android 未対応 なしOpera Android 完全対応 37Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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