1. 概論
この章は、規範的ではない。
CSS 2.1 [CSS21]は、ピューポートの次元を持つ連続メディアに対する初期包含ブロックを指定する。モバイル/携帯デバイスのブラウザーは、CSS 2.1によって推奨されるCSSピクセルサイズを与えるズームレベルでデスクトップブラウザーのウィンドウと比べてより狭いビューポートを一般に持つ。
狭いビューポートは、デスクトップブラウザーで見栄えがするようにデザインされた文書にとって頭痛の種である。その結果として、モバイルブラウザーのベンダーは、ビューポートサイズとは異なり、かつ典型的なデスクトップブラウザーのウィンドウに近い固定した初期包含ブロックサイズを使用する。スクロールやパンに加えて、拡大・縮小は、表示および対話するために文書の概要と文書の特定領域上の拡大との間を変えるために頻繁に使用される。
一定のDOCTYPE（たとえば、XHTML Mobile Profile）は、したがって初期包含ブロックサイズとしてビューポートサイズを使用する、携帯デバイスのために設計されると仮定されるモバイル文書と認識して使用される。
さらに、HTML <META>タグは、著者が初期包含ブロックと、比例する初期倍率のサイズを指定することを可能にするために導入された。このタグは、最初にSafari/iPhoneのブラウザーに対してAppleによって実装されたが、Opera、Android、Fennecのブラウザーにその後実装された。これらの実装は完全に相互運用可能ではなく、この仕様は、CSSにおけるビューポート<META>タグによって提供される機能の標準化への試みである。
この仕様は、間違いなく読むことを困難にする、ビューの実装の中心点から書かれる。重要な編集作業は、異なる読者へより理解可能にするために必要になるかもしれない。この仕様はまた、ビューポートがさまざまなjs APIによって参照されるものを明確にすべきである。この問題の適した議論については、ppkによるブログの記事を参照されたい。
この仕様および関連する仕様についての様々なissueは、このレポートに記載されている。
2. 値
この仕様は、[CSS3SYN]からのCSSプロパティ定義規則に従う。
値型は、[CSS3VAL]で定義される。
3. ビューポート
CSS 2.1において、ビューポートは、連続メディアのためのユーザーエージェントの機能であり、そして連続メディアに対して初期包含ブロックを確立するために使用した。ページメディアの場合、初期包含ブロックはページ領域に基づく。ページ領域は、@page規則を通して設定することができる。したがって、@viewportは連続メディアに、および@pageはページメディアに適用され、これらは相互作用または競合しない。
この仕様は、ユーザーエージェント（UA）によって提供されるビューポートのサイズを上書きする方法を導入する。このため、初期ビューポートと実ビューポートとの間の違いを導入する必要がある。
- 初期ビューポート
- これは、任意のユーザーエージェントまたは著者スタイルが、ユーザーエージェントのウィンドウまたは表示領域によって与えられるビューポートを上書きする前のビューポートを参照する。初期ビューポートはウィンドウまたは表示領域のサイズと共に変更されることに注意する。
- 実ビューポート
- これは、カスケードされたビューポートの記述子の後に得られるビューポートであり、次の制約手順が適用される。
実ビューポートがウィンドウまたは表示領域の内側に収めることができない場合、実ビューポートが初期ビューポートよりも大きい、または倍率が実ビューポートの一部のみを可視にさせるかのいずれかのために、ユーザーエージェントはスクロールまたはパンメカニズムを提供すべきである。
文書の基本方向がltrである場合に、実ビューポートおよびウィンドウまたは表示領域の左上隅に最初には揃えることが推奨される。同様に、基本方向がrtlである場合に、右上隅に整列する。文書に対する基本方向は、HTMLまたはXHTML文書の最初の<BODY>要素に対するdirectionプロパティの算出値として定義される。他の文書型の場合、root要素に対して算出されるdirectionとなる。
"dbaron：問題は、これはデスクトップブラウザー上で何をするものなのか？（そして、デスクトップブラウザーとは何なのか）。"現在のモバイルの動作に対して説明されるユーザーエージェントスタイルシートとは対照的に、"デスクトップ"ブラウザーは、概してユーザーエージェントスタイルを持たず、@viewportに対するどのユーザーエージェントスタイルも、デフォルト（実ビューポートは初期ビューポートである）によって"デスクトップ"の動作を与えないと言う必要がある。
4. The @viewport#at-ruledef-viewportReferenced in:3. The viewport (2)4. The @viewport rule (2) (3) (4) (5) (6) (7)4.1. Syntax (2)5. Viewport descriptors5.1. The min-width and max-width descriptors (2)5.2. The width shorthand descriptor5.3. The min-height and max-height descriptors (2)5.4. The height shorthand descriptor5.5. The zoom descriptor5.6. The min-zoom descriptor5.7. The max-zoom descriptor5.8. The user-zoom descriptor5.9. The orientation descriptor7. Media Queries (2) (3) (4) (5) (6) (7) (8) (9) (10)8. CSSOM8.2. Interface CSSViewportRule (2)9. Viewport <META> element9.4. Translation into @viewport descriptors (2) The width and height properties (2) The initial-scale, minimum-scale, and maximum-scale properties The user-scalable property11. UA stylesheets rule
このような誤った例が、“モバイルフレンドリー”な文書にするために@viewport { width: auto; }の代わりに@viewport { width: 320px; }を書くことになる。
@viewportの@規則は、ピューポートを記述する記述子のブロックに続く@keywordで構成される。
@viewport規則の内側の記述子は文書ごとであり、関連する継承は存在しない。したがって、inheritキーワードを使用する宣言は破棄される。記述子は@page記述子と同様に働き、CSSのカスケード順に従う。したがって、@viewport規則内の記述子は、先行する規則から記述子を上書きする。宣言は、記述子のカスケーディングに適宜影響を与える!importantを許可する。
@viewport規則は、トップレベル文書のみに適用する。
@viewport {
width: 320px auto;
}
4.1. 構文
@viewport規則に対する構文は、（CSS 2.1 [CSS21]の文法付録からの表記法を使用して）次のとおりである：
viewport
: VIEWPORT_SYM S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
;
新しいトークンとともに：
@{V}{I}{E}{W}{P}{O}{R}{T} {return VIEWPORT_SYM;}
ここで：
V v|\\0{0,4}(56|76)(\r\n|[ \t\r\n\f])?|\\v
W w|\\0{0,4}(57|77)(\r\n|[ \t\r\n\f])?|\\w
viewport非終端は、ruleset、mediaおよびpage非終端とともにstylesheet生成物に追加される：
stylesheet
: [ CHARSET_SYM STRING ';' ]?
[S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]*
[ [ ruleset | media | page | viewport ] [ CDO S* | CDC S* ]* ]*
;
これはまた、@mediaや@supportsのような条件付きグループ規則 の内側にネストされた@viewport規則を可能にするために[CSS3-CONDITIONAL]で定義されるnested_statement生成物に追加される。
nested_statement
: ruleset | media | page | font_face_rule | keyframes_rule |
supports_rule | viewport
;
5. ビューポートプロパティ
この章は、@viewport規則の内側で許可される記述子を示す。ここで記載されるもの以外の記述子は破棄される。
相対長さの値は、初期値に対して解決される。たとえば、'em’は、font-sizeプロパティの初期値に対して解決される。ビューポート長さ（vw、vh、vmin、vmax）は、初期ビューポートと相対的である。
5.1. min-widthおよびmax-width記述子
min-およびmax-機能は、メディアクエリーで達成することができ、削除すべきか？
| 名前： | min-width#descdef-viewport-min-widthReferenced in:5.1. The min-width and max-width descriptors (2)5.2. The width shorthand descriptor (2) (3) Resolve non-auto lengths to pixel lengths The width and height properties |
|---|---|
| For: | @viewport |
| 値： | <viewport-length> |
| 初期値： | auto |
| パーセンテージ： | 初期ビューポートの幅を参照 |
| メディア： | visual, continuous |
| 算出値： | 指定のauto、絶対長さ、またはパーセンテージ。 |
| 名前： | max-width#descdef-viewport-max-widthReferenced in:5.1. The min-width and max-width descriptors (2)5.2. The width shorthand descriptor (2) (3) Resolve non-auto lengths to pixel lengths The width and height properties |
|---|---|
| For: | @viewport |
| 値： | <viewport-length> |
| 初期値： | auto |
| パーセンテージ： | 初期ビューポートの幅を参照 |
| メディア： | visual, continuous |
| 算出値： | 指定のauto、絶対長さ、またはパーセンテージ。 |
初期包含ブロックのサイズを設定するために使用されるビューポートの最小および最大幅を指定する。ここで、
<viewport-length>#typedef-viewport-lengthReferenced in:5.1.
The min-width and max-width descriptors (2)5.2.
The width shorthand descriptor (2) (3)5.3.
The min-height and max-height descriptors (2)5.4.
The height shorthand descriptor (2) (3)9.3. extend-to-zoomAppendix A. Changes = auto | <length> | <percentage>
そして値は次の意味を持つ：
- auto#valdef-viewport-length-autoReferenced in:6.1. Definitions Resolve non-auto lengths to pixel lengths Resolve initial width and height from min/max descriptors (2) Resolve width value (2) Resolve height value Resolving 'extend-to-zoom' (2)11.1. Large screen UA styles
- 使用値は、制約手順に従って他の記述子の値から計算される。
参考情報の章で推奨されるユーザーエージェントスタイルシートは、現在の実装の動作を適切に表すものではない。ユーザーエージェントのデフォルトの動作と要求CSSピクセルとの間を切り替えるためのより明示的なメカニズムが存在すべきであるか？
- <length>
- 非負の絶対または相対長さ。
- <percentage>
- 水平および垂直長さそれぞれに対して、倍率1.0で初期ビューポートの幅または高さと相対的なパーセンテージの値。非負でなければならない。
min-widthおよびmax-width記述子は、制約手順への入力である。幅は、最小/最大の制約内でできるだけ近い''初期ビューポート''幅に最初に設定される。
5.2. width略式記述子
| 名前： | width#descdef-viewport-widthReferenced in:5.2. The width shorthand descriptor The width and height properties (2) |
|---|---|
| For: | @viewport |
| 値： | <viewport-length>{1,2} |
| 初期値： | 個々の記述を参照 |
| パーセンテージ： | 個々の記述を参照 |
| メディア： | visual, continuous |
| 算出値： | 個々の記述を参照 |
これは、min-widthとmax-widthの両方を設定するための略式記述子である。1つの<viewport-length>値は、その値にmin-widthとmax-widthの両方を設定する。2つの<viewport-length>値は、1つ目にmin-widthを設定し、2つ目にmax-widthを設定する。
5.3. min-heightおよびmax-height記述子
| 名前： | min-height#descdef-viewport-min-heightReferenced in:5.3. The min-height and max-height descriptors Resolve non-auto lengths to pixel lengths The width and height properties |
|---|---|
| For: | @viewport |
| 値： | <viewport-length> |
| 初期値： | auto |
| パーセンテージ： | 初期ビューポートの高さを参照 |
| メディア： | visual, continuous |
| 算出値： | 指定のauto、絶対長さ、またはパーセンテージ。 |
| 名前： | max-height#descdef-viewport-max-heightReferenced in:5.3. The min-height and max-height descriptors Resolve non-auto lengths to pixel lengths The width and height properties |
|---|---|
| For: | @viewport |
| 値： | <viewport-length> |
| 初期値： | auto |
| パーセンテージ： | 初期ビューポートの高さを参照 |
| メディア： | visual, continuous |
| 算出値： | 指定のauto、絶対長さ、またはパーセンテージ。 |
初期包含ブロックのサイズを設定するために使用されるビューポートの最小および最大高さを指定する。
min-heightおよびmax-height記述子は、制約手順への入力である。高さは、最小/最大の制約内でできるだけ近い''初期ビューポート''高さに最初に設定される。
5.4. height略式記述子
| 名前： | height#descdef-viewport-heightReferenced in:5.4. The height shorthand descriptor The width and height properties |
|---|---|
| For: | @viewport |
| 値： | <viewport-length>{1,2} |
| 初期値： | 個々の記述を参照 |
| パーセンテージ： | 個々の記述を参照 |
| メディア： | visual, continuous |
| 算出値： | 個々の記述を参照 |
これは、min-heightとmax-heightの両方を設定するための略式記述子である。1つの<viewport-length>値は、その値にmin-heightとmax-heightの両方を設定する。2つの<viewport-length>値は、1つ目にmin-heightを設定し、2つ目にmax-heightを設定する。
5.5. zoom記述子
| 名前： | zoom#descdef-viewport-zoomReferenced in:5.5. The zoom descriptor (2)5.6. The min-zoom descriptor (2) (3)5.7. The max-zoom descriptor (2) (3) The width and height properties10. Handling auto for zoom (2) (3)Appendix A. Changes |
|---|---|
| For: | @viewport |
| 値： | auto | <number> | <percentage> |
| 初期値： | auto |
| パーセンテージ： | 倍率自身 |
| メディア： | visual, continuous |
| 算出値： | 指定のauto、または非負の数またはパーセンテージ。 |
ウィンドウまたは表示領域に対する初期倍率を指定する。これは、ズームの虫眼鏡型である。初期倍率から倍率をインタラクティブに変更しても、初期または実ビューポートのサイズに影響しない。
値は次の意味を持つ：
- auto#valdef-zoom-autoReferenced in:5.5. The zoom descriptor5.6. The min-zoom descriptor (2)5.7. The max-zoom descriptor (2)6.1. Definitions (2) (3) Resolve min-zoom and max-zoom values (2) Constrain zoom value to the [min-zoom, max-zoom] range Resolving 'extend-to-zoom' (2) (3) The width and height properties10. Handling auto for zoom (2) (3)
- 拡大率は UA 依存である。ユーザーエージェントは、初期倍率を見つけるためにレンダリングされる文書上のキャンバスの領域のサイズを使用してもよい。zoomに対するauto値を処理するために提案された方法については、この章を参照のこと。
- <number>
- 倍率として使用される非負の数字。1.0の倍数は、拡大縮小が行われないことを意味する。1.0より大きな値はズームイン効果を与え、1.0より小さな値はズームアウト効果を与える。
- <percentage>
- 倍率として使用される非負のパーセンテージの値。100%の倍率は、拡大縮小が行われないことを意味する。100%より大きな値はズームイン効果を与え、100%より小さな値はズームアウト効果を与える。
5.6. min-zoom記述子
| 名前： | min-zoom#descdef-viewport-min-zoomReferenced in:5.6. The min-zoom descriptor9.3. extend-to-zoom The initial-scale, minimum-scale, and maximum-scale properties (2) |
|---|---|
| For: | @viewport |
| 値： | auto | <number> | <percentage> |
| 初期値： | auto |
| パーセンテージ： | 倍率自身 |
| メディア： | visual, continuous |
| 算出値： | 指定のauto、または非負の数またはパーセンテージ。 |
最小の許容される倍率を指定する。この記述子は、非auto zoom値を拘束するためだけでなく、ユーザーの相互作用を通して設定することができる許容される倍率を制限するための制約手順への入力として使用される。ユーザーエージェントはまた、zoomの使用値がautoである場合に実倍率を選ぶ際に、制約としてこの値を使用すべきである。
値は次の意味を持つ：
- auto
- 倍率の下限は、ユーザーエージェント依存である。制約手順で使用されるzoom記述子上の最小値制約は存在しない。
- <number>
- 倍率の最小値を制限する非負の数。
- <percentage>
- 倍率の最小値を制限する非負のパーセンテージ。
5.7. max-zoom記述子
| 名前： | max-zoom#descdef-viewport-max-zoomReferenced in:5.7. The max-zoom descriptor9.3. extend-to-zoom The initial-scale, minimum-scale, and maximum-scale properties (2) (3) |
|---|---|
| For: | @viewport |
| 値： | auto | <number> | <percentage> |
| 初期値： | auto |
| パーセンテージ： | 倍率自身 |
| メディア： | visual, continuous |
| 算出値： | 指定のauto、または非負の数またはパーセンテージ。 |
最大の許容される倍率を指定する。この記述子は、非auto zoom値を拘束するためだけでなく、ユーザーの相互作用を通して設定することができる許容される倍率を制限するための制約手順への入力として使用される。ユーザーエージェントはまた、zoomの使用値がautoである場合に実倍率を選ぶ際に、制約としてこの値を使用すべきである。
値は次の意味を持つ：
- auto
- 倍率の上限は、ユーザーエージェント依存である。制約手順で使用されるzoom記述子上の最大値制約は存在しない。
- <number>
- 倍率の最大値を制限する非負の数。
- <percentage>
- 倍率の最大値を制限する非負のパーセンテージ。
5.8. user-zoom記述子
| 名前： | user-zoom#descdef-viewport-user-zoomReferenced in:5.8. The user-zoom descriptor The user-scalable property |
|---|---|
| For: | @viewport |
| 値： | zoom | fixed |
| 初期値： | zoom |
| パーセンテージ： | N/A |
| メディア： | visual, continuous |
| 算出値： | 指定される |
倍率をユーザーの相互作用によって変更することができるかそうでないかを指定する。
値は次の意味を持つ：
- zoom#valdef-user-zoom-zoomReferenced in: The user-scalable property (2)
- ユーザーは、インタラクティブに倍率を変更することができる。
- fixed#valdef-user-zoom-fixedReferenced in: The user-scalable property (2)
- ユーザーは、インタラクティブに倍率を変更することができない。
5.9. orientation記述子
| 名前： | orientation#descdef-viewport-orientationReferenced in:5.9. The orientation descriptor |
|---|---|
| For: | @viewport |
| 値： | auto | portrait | landscape |
| 初期値： | auto |
| パーセンテージ： | N/A |
| メディア： | visual, continuous |
| 算出値： | 指定される |
この記述子は、文書が縦長または横長モードで表示されるように要求するために使用される。方向がデバイスの傾斜によって変更されるユーザーエージェント/デバイスの場合、著者は、方向の変化を抑制するためにこの記述子を使用することができる。文書がフルスクリーンで表示される場合、記述子は、スタンドアロンのウェブアプリケーションを配慮すべきである。ユーザーの混乱を避けるために通常のウェブナビゲーションに対して無視することが推奨される。
値は次の意味を持つ：
- auto
- ユーザーエージェントは、操作のデバイスの通常モードに基づいて方向を自動的に選択する。デバイスが傾いた場合、ユーザーエージェントは、表現の向きを変更することを選択してもよい。
- portrait
- 文書は、縦長表現で固定されるべきである。
- landscape
- 文書は、横長表現で固定されるべきである。
6. ビューポート記述子値の制約
6.1. 定義
次の手順の場合：
記述子は、手順におけるその時点で解決/制約される値を参照する。記述子は、記述子の計算値が初めに解決される。
widthおよびheightは、略式記述子ではなく解決されたビューポートサイズを参照する。They are both initially auto.
引数の一方がautoであるMIN/MAXの計算は、他方の引数を解決する。たとえば、MIN(0.25, auto) = 0.25、MAX(5, auto) = 5。
initial-widthは、倍率1.0でピクセル単位の初期ビューポートの幅である。
initial-heightは、倍率1.0でピクセル単位の初期ビューポートの夜笠である。
6.2. 手順
使用値は、下記の手順を経由する算出値から解決される。
ユーザーエージェントは、たとえば、デバイスが横長モードから縦長モードに傾けられる、または''初期ビューポート''を形成するウィンドウがリサイズされる場合、必要ならば、ユーザー環境の変化に応じて、この手順の再実行するおよび文書の再レイアウトをすることが期待されるが、必須ではない。
しかし、メディアクエリーおよびDevice Adaptionは拘束される仕様である。その結果、メディアクエリーをサポートするユーザーエージェントはまた、ユーザー環境の変化がユーザーエージェントにメディアクエリーを再評価させる原因となるすべての場合において、この手順を再実行して文書を再レイアウトしなければならない。
min-zoomおよびmax-zoom値を解決する
[min-zoom, max-zoom]の範囲にzoom値を制約する
- If
zoomis not auto, setzoom = MAX(min-zoom, MIN(max-zoom, zoom))
非auto長さをピクセル長さに解決する
- 絶対長さおよびパーセンテージをmin-width、max-width、min-heightおよびmax-height記述子に対するピクセル値に解決する。
min/max記述子から初期widthおよびheightを解決する
-
min-widthまたはmax-widthがautoでない場合、width = MAX(min-width, MIN(max-width, initial-width))を設定する -
min-heightまたはmax-heightがautoでない場合、height = MAX(min-height, MIN(max-height, initial-height))を設定する。
width値を解決する
-
widthおよびzoomが両方autoである場合、width = initial-widthを設定する - そうでなければ、
widthがautoである場合、width = height * (initial-width / initial-height)、またはinitial-heightが0であるならば、width = initial-widthを設定する。
height値を解決する
-
heightがautoである場合、height = width * (initial-height / initial-width)、またはinitial-widthが0であるならば、height = initial-heightを設定する。
7. メディアクエリー
複数のメディア機能に対して、初期包含ブロックのサイズおよびデバイスの方向は、メディアクエリー上の@viewport規則の効果が特別な注意を必要とすることを意味する、メディアクエリー評価の結果に影響する。
メディアクエリー仕様[MEDIAQ]より：
“式を評価するためにスタイルを適用する必要はない。これは循環依存関係を避けるためである。たとえば、印刷された文書のアスペクト比はスタイルシートに影響されるだろうが、device-aspect-ratioに関わる式はユーザーエージェントが持つアスペクト比の規定値を基にする。”
しかしユーザーエージェントは、 循環依存を回避するためにビューポートのサイズに依存するメディア機能式および他の値を評価するために使用される初期ビューポートサイズとは別に@viewport規則をカスケードしなければならないが、他の規則すべてをカスケードする場合に実ビューポートサイズを使用しなければならない。
CSS規則を適用するための手順：
- ビューポートのサイズに依存する値および評価に対する初期ビューポートのサイズを使用するすべての@viewport規則をカスケードする
- カスケードされたビューポートの記述子から実ビューポートを計算する
- 実ビューポートのサイズを使用する他の規則のすべてをカスケードする
スタイル規則に対するメディアクエリーを評価するために@viewport規則を適用することから得られるビューポート記述子を使用するための理論的解釈は、文書がレイアウトされかつ初期またはユーザーエージェントスタイルシートで指定されない実ビューポートにメディアクエリーが一致すべきものである。ユーザーエージェントスタイルシートが980pxのビューポートの幅を持つが、320pxの初期ビューポートの幅を持つものを与えられる以下の例を考えてみる。著者は、文書を400pxを境に初期包含ブロックの幅の見た目をよくさせるために別のスタイルを作成する。実ビューポートは320pxの幅を使用し、そして''実ビューポート''幅にスタイルを一致させるために、@viewport規則を適用する結果となるビューポートは、メディアクエリーの評価をするために使用されるべきである。
@viewport {
width: auto;
}
@media screen and (min-width: 400px) {
div { color: red; }
}
@media screen and (max-width: 400px) {
div { color: green; }
}
他の例：
@media screen and (width: 397px) {
div { color: green; }
}
@viewport {
width: 397px;
}
下記は、ビューポート記述子によって影響されるメディアクエリーに依存する@viewport規則の例である。
@viewport {
width: 397px;
}
@media screen and (width: 397px) {
@viewport {
width: 500px;
}
}
@media screen and (width: 397px) {
div { color: green; }
}
著者は、ビューポート記述子によって影響される評価をメディアクエリーに依存する@viewport規則を記述しないことを推奨する。@viewport規則は、メディアクエリーまたはリフローの不必要な再評価を避けるために可能な限り文書内の早くに配置されることも推奨される。
8. CSSOM
@viewport規則は、新しいCSSRuleインターフェイスを通してCSSOMに公開される。
8.1. インターフェイスCSSRule
次の規則型は、CSSRuleインターフェイスに加えられる。これは、新しいビューポート規則に識別を提供する。
partial interface CSSRule {
const unsigned short VIEWPORT_RULE = 15;
};
8.2. インターフェイスCSSViewportRule
The CSSViewportRule#cssviewportruleReferenced in:8.2. Interface CSSViewportRule interface represents the style rule for an @viewport rule.
interface CSSViewportRule : CSSRule {
readonly attribute CSSStyleDeclaration style;
};
- style#dom-cssviewportrule-styleReferenced in:8.2. Interface CSSViewportRule of type CSSStyleDeclaration, readonly
- この属性は、この@viewport規則と関連するビューポート記述子を表す。
9. ビューポートMETA要素
この章は、規範的ではない。
この章は、この仕様に記載される@viewport規則の記述子へ、iPhoneのSafariブラウザーにAppleによって最初に実装された、ビューポート<META>要素のコンテンツ属性からのマッピングを記述する。
Safariの実装と一致させるために、次の解析アルゴリズムおよび変換規則は、以下のユーザーエージェントスタイルシートに依存する。複雑な説明についてはユーザーエージェントスタイルシートを参照のこと。
@viewport {
width: extend-to-zoom 980px;
min-zoom: 0.25;
max-zoom: 5;
}
これらの値は、すべてのユーザーエージェントによくに適合しないことに注意する。たとえば、0.25のmin-zoomとともに、元のiPhoneのように320px幅のデバイス上で1280px以下の幅に対するウィンドウの内側で文書の全体幅に適合することができるが、240pxディスプレイ（CSSピクセル単位で与えられている全ての幅）を持つ場合にちょうど960pxになる。
9.1. プロパティ
ビューポート<META>要素で認識されるプロパティは：
widthheightinitial-scaleminimum-scalemaximum-scaleuser-scalable
9.2. 解析アルゴリズム
以下は、iPhoneのSafariのテストから生成される<META>タグのcontent属性を解析するためのアルゴリズムである。テストは、iPhone iOS 4を実行するiPod touch上で行われた。ブラウザーのユーザーエージェント文字列："Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7"。使用される擬似コード表記は、[Algorithms]で使用される表記に基づく。
空白クラスは、以下の文字（ascii）を含む：
- 水平タブ（0x09）
- ラインフィード（0x0a）
- キャリッジリターン（0x0d）
- スペース（0x20）
プロパティと値ペアとの間に認識されるセパレーターは、Safariの実装に対してカンマである。一部の実装は、カンマとセミコロンの両方をサポートしている。そのために、既存のコンテンツは、コンマの代わりにセミコロンを使用する。著者は、すべてのユーザーエージェントで期待されるようなコンテンツ制作物を保証するためにカンマを使用すべきだが、実装者は既存のコンテンツの相互運用性を確保するために両方へのサポートを追加してもよい。
セパレータークラスは、優先としてコンマおよびオプションとしてセミコロンをともなう、次の文字（ASCII）を含む：
- コンマ（0x2c）
- セミコロン（0x3b）
Parse-Content(S) i ← 1 while i ≤ length[S] do while i ≤ length[S] and S[i] in [whitespace, separator, '='] do i ← i + 1 if i ≤ length[S] then i ← Parse-Property(S, i) Parse-Property(S, i) start ← i while i ≤ length[S] and S[i] not in [whitespace, separator, '='] do i ← i + 1 if i > length[S] or S[i] in [separator] then return i property-name ← S[start .. (i - 1)] while i ≤ length[S] and S[i] not in [separator, '='] do i ← i + 1 if i > length[S] or S[i] in [separator] then return i while i ≤ length[S] and S[i] in [whitespace, '='] do i ← i + 1 if i > length[S] or S[i] in [separator] then return i start ← i while i ≤ length[S] and S[i] not in [whitespace, separator, '='] do i ← i + 1 property-value ← S[start .. (i - 1)] Set-Property(property-name, property-value) return i
Set-Propertyは、大文字・小文字不区別で記載されたプロパティ名に一致する。property-value文字列は、次のように解釈される：
-
property-valueの接頭辞がstrtodを使用する数に変換できる場合、値はその数になる。文字列の残りは無視される。 - 値が上に記載したように数値に変換できない場合、全体の
property-value文字列は、以下の文字列（yes、no、device-width、device-height）に大文字・小文字不区別で一致する。 - 文字列が既知の文字列のいずれにも一致しない場合、値は未知である。
9.3. extend-to-zoom
ビューポートの幅または高さが所定のズームレベルで表示領域を埋めるように拡張される場所で<META>ビューポートからの機能を実装することができるようにするために、我々は、extend-to-zoomと呼ばれる<viewport-length>値のリストにユーザーエージェント内部値を導入する。これは、以下の節で概説される変換で幅および高さの宣言に使用される。
この新しい値は、2つの理由のためのマッピングを実装するために必要である。まず、幅/高さを解決することが特定の倍率のために表示幅/高さへピクセル長さを延長する必要があるかどうかは、現在の初期幅/高さに依存する。<meta name="viewport" content="width=400, initial-scale=1">は、320pxのinitial-widthに対して400px、および640pxの初期幅に対して640pxの幅が得られる。これは、初期幅が向きの変更のように変化する際に正しく制約する規範的な最小/最大の記述子として表現することができない。
次に、拡張された幅/高さはまた、ユーザーエージェントスタイルシートからmin-zoomおよびmax-zoomを含む、異なるソースからのビューポートのプロパティのカスケードに依存する。たとえば、ユーザーエージェントスタイルシートがmax-zoom: 5を持ち、かつ初期幅が320pxである場合、<meta name="viewport" content="width=10">は64pxに解決される。
'extend-to-zoom'を解決する
'extend-to-zoom'の値は、拘束手順の手順3の一部としてピクセルまたはauto長さに解決される。これは非規範的記述子の値であるため、解像度はここで説明される。'extend-to-zoom'が妥当な値である場合、最大記述子は最小記述子の前のピクセル長さに解決される必要があることに注意する。
extend-zoom = MIN(zoom, max-zoom)とする
非auto extend-zoomの場合：
extend-width = initial-width / extend-zoom extend-height = initial-height / extend-zoom
その後、次のとおりにextend-to-zoomを解決する：
-
extend-zoomがautoである場合： -
extend-zoomが非autoである場合：-
max-widthが'extend-to-zoom'である場合、max-width = extend-widthを設定する -
max-heightが'extend-to-zoom'である場合、max-height = extend-heightを設定する -
min-widthが'extend-to-zoom'である場合、min-width = MAX(extend-width, max-width)を設定する -
min-heightが'extend-to-zoom'である場合、min-height = MAX(extend-height, max-height)を設定する
-
9.4. @viewport記述子への翻訳
ビューポートの<META>要素は、単一の@viewport規則のみを含む、DOMと厳密に同じ場所で、あたかも<STYLE>要素であったかようにカスケードで配置される。
先の節で解析されたプロパティ/値ペアのそれぞれは変換され、そして次のように単一の@規則に追加される：
未知のプロパティ
未知のプロパティは破棄される。
widthおよびheightプロパティ
widthおよびheightのビューポート<META>プロパティは、min-width/min-heightをextend-to-zoomに設定し、max-width/max-heightを次のとおりにビューポート<META>プロパティからの長さに設定する、widthおよびheightへ翻訳される：
- 非負の数は、ピクセル長さに翻訳され、
[1px, 10000px]の範囲で固定される - 負の数値は破棄される
-
device-widthおよびdevice-heightはそれぞれ100vwおよび100vhに翻訳される - 他のキーワードおよび未知の値は、1pxに翻訳する
一部既存のユーザーエージェントの実装は、CSSピクセルでデバイスの次元を使用し、一部は、デバイス幅/デバイス高さに対してウィンドウの次元（CSSピクセル）を使用する。上記で、ウィンドウの次元を100vw / 100vhに翻訳する。理論的根拠は、デバイスの次元が、ウィンドウがサイズ変更可能であるまたはデバイスの画面を埋めない場合に著者がユーザーエージェントに意図したものではないことである。
この<META>要素は：
<meta name="viewport" content="width=500, height=600">
以下に翻訳する：
@viewport {
width: extend-to-zoom 500px;
height: extend-to-zoom 600px;
}
非auto zoom宣言およびwidth宣言のない@viewport規則に翻訳するビューポートの<META>要素の場合：
-
'
height'記述子を追加する場合：width: auto;
-
そうでなければ：
width: extend-to-zoom;
これを@viewport規則に追加する。
<META>要素は：
<meta name="viewport" content="initial-scale=1.0">
以下に翻訳する：
@viewport {
zoom: 1.0;
width: extend-to-zoom;
}
<META>要素は：
<meta name="viewport" content="initial-scale=2.0, height=device-width">
以下に翻訳する：
@viewport {
zoom: 2.0;
width: auto;
height: extend-to-zoom 100%;
}
initial-scale、minimum-scaleおよびmaximum-scaleプロパティ
プロパティは、それぞれ次の値の翻訳をもつ、'zoom'、'min-zoom'および'max-zoom'に翻訳される。
- 非負の数値は、<number>値に翻訳され、
[0.1, 10]の範囲で固定される - 負の数値は破棄される
-
yesは1に翻訳される -
device-widthおよびdevice-heightは10に変換される -
noおよび未知の値は、0.1に翻訳される
max-zoom宣言をもたず、かつユーザーエージェントスタイルシートのmax-zoom値より大きい非automin-zoomをもつ@viewport規則に変換するビューポートの<META>要素にの場合、min-zoom宣言の値は、ユーザーエージェントスタイルシートのmax-zoomの値に固定される。
user-scalableプロパティ
user-scalableプロパティは、次の値の翻訳をもつuser-zoomに翻訳される。
-
yesおよびnoは、それぞれzoomおよびfixedに翻訳される。 - 数 ≥ 1、数 ≤ -1、
device-widthおよびdevice-heightは、zoomにマッピングされる -
<-1, 1>範囲の数値および未知の値は、fixedにマッピングされる
<META>要素は：
<meta name="viewport" content="width=480, initial-scale=2.0, user-scalable=1">
次の@viewportブロックに翻訳される：
@viewport {
width: 480px;
zoom: 2.0;
user-zoom: zoom;
}
10. zoomのためのauto処理
この章は、規範的ではない。
この章は、使用値がautoである際にzoom記述子に対するの実効値を選ぶ方法の1つを示す。
サイズ(initial-width, initial-height)をもつ初期ビューポートを与えられ、かつ書式構造が(rendered-width, rendered-height)でレンダリングされるキャンバス内の有限領域を与えられる。その領域は、少なくとも実ビューポートと同じ大きさである。
zoom = MAX(initial-width / rendered-width, initial-height / rendered-height)
実倍率はまた、[min-zoom, max-zoom]の範囲によってさらに制限されるべきである。
11. ユーザーエージェントスタイルシート
この章は参考情報である。
大部分はデスクトップおよびラップトップコンピューターで使用される、従来のユーザーエージェントは、レイアウトを壊すことがなく初期ビューポート内部のほとんどのウェブサイトに合うようにサイズを簡単に変更することができる。下記の推奨を使用して、任意の@viewport規則自身を追加しないサイトは、外観および規則が常に持つような機能を果たし続ける。
11.1. 大画面ユーザーエージェントスタイル
ユーザーエージェントがレイアウトを壊すことなく共通のウェブサイトに合うように十分大きい初期ビューポートサイズを持つ、またはサイズを再変更することが簡単にできる場合、推奨はユーザーエージェントスタイルを持つことはない。つまり、autoに最初は設定されるすべての記述子を持つことを意味し、ビューポート記述子をサポートしないように動作する。
ユーザーエージェントが方向の変更をサポートし、かつ縦長モードの大きさが上記のとおり共通の文書に合うが横長モードの大きさが合わない場合、横長モードで幅の等しい、最小のレイアウト幅を設定することを推奨する。
11.2. 小画面ユーザーエージェントスタイル
小画面ユーザーエージェントの場合、ユーザーエージェントは、（前述のような）従来のユーザーエージェントの初期ビューポート幅として通常使用するものに最小ビューポートの幅を設定することができる。
ズーム機能の制限はユーザーエージェントスタイルに反映されないのではなく、むしろズームに対する使用値に影響を与えることが推奨される。ビューポートMETA章に記載されるmin-zoom/max-zoomユーザーエージェントスタイルは、推奨されるユーザーエージェントスタイル シートの一部でなく、Safariブラウザーの動作方法の正確な説明を与えることがある。
付録A. 変更点
この付録は参考情報である。
この付録は、2011年9月15日公開のFirst Public Working Draftからの変更点を説明する。
- Made various editorial improvements and clarifications.
- Added OM Interfaces.
- Added semi-colon as separator in meta viewport.
- Created UA stylesheets section.
- Added recommendation for when to respect orientation property.
- Dropped support for the resolution descriptor.
- Decouple width/height and zoom, introducing extend-to-zoom value for meta viewport translation.
- Made normative rules about interaction of @viewport and @media.
- Allow 0 for <viewport-length> and zoom values
- Removed support for device-width/height.
- Apply @viewport to top level document only.
- Extend [CSS3-CONDITIONAL] rather than CSS21 for nesting in @media.