@viewport

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
@viewportChrome 完全対応 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 完全対応 12
接頭辞付き 無効
完全対応 12
接頭辞付き 無効
接頭辞付き -ms- のベンダー接頭辞が必要
無効 From version 12: 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 完全対応 29Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See Firefox bug 747754.
Opera Android 完全対応 16
無効
完全対応 16
無効
無効 From version 16: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
未対応 11.1 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 未対応 なし
補足
未対応 なし
補足
補足 See WebKit bug 95959.
Samsung Internet Android 完全対応 2.0
height descriptorChrome 完全対応 29Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
max-height descriptorChrome 完全対応 29Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
max-width descriptorChrome 完全対応 29Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
max-zoom descriptorChrome 完全対応 29Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16Safari 未対応 なしWebView Android 完全対応 37Chrome Android 完全対応 29Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
min-height descriptorChrome 完全対応 29Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
min-width descriptorChrome 完全対応 29Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
min-zoom descriptorChrome 完全対応 29Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16Safari 未対応 なしWebView Android 完全対応 37Chrome Android 完全対応 29Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
orientation descriptor
実験的
Chrome 未対応 なしEdge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 11.1 — 14
接頭辞付き
未対応 11.1 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
user-zoom descriptorChrome 完全対応 29Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16Safari 未対応 なしWebView Android 完全対応 37Chrome Android 完全対応 29Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
viewport-fit descriptor
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
width descriptorChrome 完全対応 29Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16
完全対応 16
未対応 11.1 — 15
Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 29Firefox Android 未対応 なしOpera Android 完全対応 16
完全対応 16
未対応 11.1 — 14
Safari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
zoom descriptorChrome 完全対応 29Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Firefox 未対応 なしIE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 16Safari 未対応 なしWebView Android 完全対応 4.4Chrome Android 完全対応 61Firefox Android 未対応 なしOpera Android 完全対応 16Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0

凡例

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

関連情報