Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

@viewport

概要

CSS の @viewport @-規則 は、複数のメディア特性をもつ CSS 宣言ブロックを含みます。CSS 宣言ブロックは、波括弧 { ... } で囲まれます。これらのメディア特性は、主にモバイルデバイスでのビューポート設定を制御します。

構文

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

メディア特性(Descriptors)

ブラウザは、認識できないメディア特性を無視するでしょう。

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 {
  <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 Device Adaptation
@viewport の定義
草案  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 29 (behind a flag) 未サポート 10 -ms 11.10
Removed in 15
Reintroduced behind a flag in 16
未サポート
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 4.4 29 未サポート 10-ms[1] 11.10
Removed in 15
Reintroduced behind a flag in 16
未サポート

[1] Windows Phone 8 の古いバージョンにある IE モバイル 10 は、device-width に不具合がある。@-ms-viewport を使用した場合、物理的なピクセルによる画面幅ではなく、CSS ピクセルとして評価してしまう。これは仕様書に誤って従ったものである。しかし、<meta> タグに viewport を書いたときは、device-width は正しく評価される。Microsoft によると、この不具合は Windows Phone 8 アップデート 3 (通称 GDR3) で解消している。だが、Lumia Black GDR3 アップデート(Nokia Lumia 向けの GDR3)では、不具合が解消していないという報告がある。(少なくとも Lumia 920 では) より詳しい情報と応急処置は Tim Kadlec のブログ記事 "Windows Phone 8 and Device-Width" を参照。

関連情報

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

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