CSS Device Adaptation

概要

この仕様は初期包含ブロック（initial containing block）に基いて使用されるビューポートのサイズや拡大率、向きを CSS で指定する製作者ための方法を提供する。

この文書のステータス

このセクションは、この文書の公開時におけるステータスについて説明する。他の文書がこの文書を上書きする可能性に注意されたい。この技術文書や W3C から公開された他の文書の最新版は W3C 技術文書インデックス (http://www.w3.org/TR/) より探すことができる。

草案としての公開は、W3C Member による支持を意味するものではない。この文書は草案段階にあり、更新、置き換え、もしくは廃止される可能性もある。策定中であることを記さずに、この文書を参照することは適当ではない。

この文書に関する議論は、公開メーリングリスト www-style@w3.org (アーカイブ, 参加の手引き) 上で行うことが望ましい。メールを送信する際には、“css-device-adapt” を件名に含めていただきたい。たとえば “[css-device-adapt] …コメントの要約…” といった形が望ましいだろう。

この文書は Style Activity の CSS Working Group によって作成された。

この文書は 5 February 2004 W3C Patent Policy の下で活動するグループにより作成された。W3C は 特許情報の開示に関する公開リスト を関連する団体と共に、その成果物とあわせて管理している。リストには情報開示に関する説明もあるため、あわせて参照されたい。特許について十分に知識のある人物が、当該仕様に Essential Claim(s) が認められると判断した場合は、W3C 特許方針の第 6 章 に従い情報を開示する必要がある。

この文書は、CSS Device Adaptation Module の 草案の初版である。

目次

• 1. はじめに
• 2. 値
• 3. ビューポート
• 4. @viewport 規則
  • 4.1. 構文
• 5. ビューポートプロパティ
  • 5.1. ‘min-width’ と ‘max-width’ プロパティ
  • 5.2. ‘width’ ショートハンドプロパティ
  • 5.3. ‘min-height’ と ‘max-height’ プロパティ
  • 5.4. ‘height’ ショートハンドプロパティ
  • 5.5. ‘zoom’ プロパティ
  • 5.6. ‘min-zoom’ プロパティ
  • 5.7. ‘max-zoom’ プロパティ
  • 5.8. ‘user-zoom’ プロパティ
  • 5.9. ‘orientation’ プロパティ
  • 5.10. ‘resolution’ プロパティ
• 6. ビューポートプロパティ値の制約
  • 6.1. 定義
  • 6.2. 手順
• 7. メディアクエリー
• 8. CSSOM
• 9. 適合性
• 10. ビューポート META 要素
  • 10.1. UA スタイルシート
  • 10.2. プロパティ
  • 10.3. 解析アルゴリズム
  • 10.4. @viewport プロパティへの変換
• 11. ‘zoom’のための‘auto’の取り扱い
• 謝辞
• 参照
  • 引用文書
  • 他の文書
• プロパティ一覧
• 目次

1. はじめに

このセクションは規範的ではない。

CSS 2.1 [CSS21] は、ピューポートのサイズを持つ連続メディアのための初期包含ブロックを指定する。モバイルやハンドヘルドデバイスのブラウザは、一般的に、CSS 2.1 によって推奨される CSS のピクセルサイズが与える縮尺レベルにおいて、デスクトップブラウザのウィンドウに比べより狭いビューポートを持つ。

狭いビューポートは、デスクトップブラウザで見栄えがするようにデザインされた文書のための課題である。この結果として、モバイルブラウザのベンダーは、ビューポートサイズとは異なって、典型的なデスクトップブラウザのウィンドウのそれに近い固定の初期包含ブロックサイズを使用する。加えて、スクロールやパン、拡大は、読書や対話をするために文書の全体と文書の特定エリアの拡大の変更に頻繁に使用される。

そのような訳で、いくつかの DOCTYPE（例えば、XHTML Mobile Profile の場合）は、初期包含ブロックサイズとしてビューポートサイズを使用し、ハンドヘルドデバイスのために設計されているという前提でモバイル文書と認識して使用される。

さらに、HTML の META タグは、製作者が初期包含ブロックと直接的に初期の拡大率のサイズを指定するために導入された。最初に Safari/iPhone のブラウザのために Apple によって実装され、その後、Opera、Android、Fennec のブラウザに実装された。これらの実装は、完全な相互運用性ではなく、CSS のビューポート META タグによって提供される機能の標準化の試みである。

2. 値

この仕様は、[CSS3SYN] の CSS プロパティの定義規則に従う。

値型は、[CSS3VAL] で定義される。

3. ビューポート

この仕様は、ユーザーエージェント（UA）によって提供されるビューポートのサイズを上書きする方法を紹介する。このため、私たちは初期ビューポートと実測ビューポート間の違いを取り入れる必要がある。

初期ビューポート（initial viewport）

これは、任意の UA または製作者のスタイルで、UA のウィンドウまたは表示エリアによって与えられたビューポートを上書きする前に参照される。初期ビューポートは、ウィンドウや表示エリアのサイズと共に変更されることに注意されたい。

実測ビューポート（actual viewport）

これは、カスケードされたビューポートのプロパティの後に得られるビューポートであり、次の制約手順が適用される。

実測ビューポートが初期ビューポートより大きいか、拡大率が実測ビューポートの部分だけを表示させたり、実測ビューポートがウィンドウまたは表示エリアの内側に収まらないとき、UA はスクロールやパンのメカニズムを提示するべきである（should）。

これは、ドキュメントの基本方向が左から右（ltr）のとき、初期状態では実測ビューポートとウィンドウまたは表示エリアの左上の角に揃っていることが推奨される。同様に、基本方向が右から左（rtl）のとき、右上の角に整列する。ドキュメントの基本方向は、HTML または XHTML ドキュメントの最初の BODY 要素のための direction プロパティの計算された値として定義される。他のドキュメントタイプの場合、root 要素のために計算された direction である。

"dbaron: これは、デスクトップブラウザ上で何をするものなのか？（そして、デスクトップブラウザは何か）。"最新のモバイルの動作のために参照される UA スタイルシートとは対照的に、"デスクトップ"ブラウザは、典型的に UA スタイルを持たないと言う必要があり、@viewport のための UA スタイルシートは、デフォルト（実測ビューポートは初期ビューポート）を通して"デスクトップ"の動作に提供しない。

4. @viewport 規則

@viewport の @規則は、ピューポートを記述するプロパティ宣言のブロックに続く @keyword で構成される。

@viewport 規則内部のプロパティ宣言は、ドキュメントのプロパティごとで、継承の影響はない。従って、‘inherit’キーワードを使用する宣言は省略される。これらは @page プロパティと同様に働き、CSS のカスケード順に従う。従って、@viewport 規則内のプロパティは、前述の規則からプロパティを上書きする。その結果、宣言は、プロパティのカスケーディングに影響をおよぼす !important を許可する。

@viewport 規則は、トップレベルドキュメントのみに適用する必要があるか？　そうでなければ、フレーム内の異なる拡大率について言及する必要がある。

Bert: @viewport と @page の相互作用は何か？

@viewport {
  width: device-width;
}

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 規則内にネストされた @viewport 規則を許可し、媒体の生成に追加される。これは、CSS 2.1 構文の拡張である。CSS3 Paged Media の草案も @media 内部に page を許可している：

media
  : MEDIA_SYM S* media_list LBRACE S* [ ruleset | viewport ]* '}' S*
  ;

5. ビューポートプロパティ

このセクションは、@viewport 規則内に許可されているプロパティを提示する。ここに記載されたもの以外のプロパティは削除される。

相対的な長さの値は、初期値に対して解決される。例えば、‘em’は、font-size プロパティの初期値に対して解決される。

5.1. ‘min-width’ と ‘max-width’ プロパティ

初期包含ブロックサイズの設定で使用されるビューポートの最小と最大の幅を指定し、

<viewport-length> = auto | device-width | device-height | <length> | <percentage>

値は次の意味を有する：

‘auto’

使用される値は、制約手順に従って他のプロパティ値から算出される。

‘device-width’

拡大率 1.0 で CSS ピクセルのスクリーンの幅。

‘device-height’

拡大率 1.0 で CSS ピクセルのスクリーンの高さ。

<length>

正の絶対値または相対的な長さ。

<percentage>

それぞれの水平と垂直の長さのために、拡大率 1.0 のときの初期ビューポートの幅または高さに対するパーセンテージの値。正の値でなければならない（must）。

min-width と max-width プロパティは、制約手順へ入力される。幅は、最初に最小/最大の制約内にできるだけ近い初期ビューポートに設定される。

5.2. ‘width’ ショートハンドプロパティ

これは min-width と max-width の両方を設定するためのショートハンドプロパティである。一つの <viewport-length> 値は、min-width と max-width の両方の値を設定する。二つの <viewport-length> 値は、一つ目の値は min-width、2つ目の値は max-width を設定する。

5.3. ‘min-height’ と ‘max-height’ プロパティ

初期包含ブロックサイズの設定で使用されるビューポートの最小と最大の高さを指定。

min-height と max-height プロパティは、制約手順へ入力される。高さは、最初に最小/最大の制約内にできるだけ近い初期ビューポートに設定される。

5.4. ‘height’ ショートハンドプロパティ

これは min-height と max-height の両方を設定するためのショートハンドプロパティである。一つの <viewport-length> 値は、min-height と max-height の両方の値を設定する。二つの <viewport-length> 値は、一つ目の値は min-height、2つ目の値は max-height を設定する。

5.5. ‘zoom’ プロパティ

ウィンドウや表示エリアのための初期拡大率を指定する。これは拡大の虫眼鏡タイプである。初期拡大率から拡大率をインタラクティブに変更しても、初期または実測ビューポートのサイズに影響しない。

値は、次の意味を持つ：数字とパーセンテージの両方が許可されるべきか？

‘auto’

拡大率は UA 依存である。UA は、ドキュメントの初期拡大率を見つけるために提供されているキャンバスエリアのサイズを使用してもよい（may）。‘zoom’ の ‘auto’ 値を処理するために提案された方法は、このセクションを参照されたい。

<number>

正の数字は拡大率として使用する。1.0 は、拡大が行われないことを意味する。1.0 より大きな値は、ズームインの効果、1.0 より小さな値は、ズームアウトの効果を与える。

<percentage>

正のパーセンテージ値は、拡大率として使用する。100% 拡大は、拡大が行われないことを意味する。100% より大きな値は、ズームインの効果、100% より小さな値は、ズームアウトの効果を与える。

5.6. ‘min-zoom’ プロパティ

許容する最小の拡大率を指定する。それは、‘zoom’ の値が非 ‘auto’ を抑制する制約手順として使用するが、ユーザーインタラクションを介して設定できる許可された拡大率をまた制限できる。UA は、‘zoom’ の使用した値が ‘auto’ で、実体の拡大率を選ぶとき、制約としてこの値を使用するべきである（should）。

値は、次の意味を持つ：

‘auto’

拡大率の下限は、UA 依存である。制約手順で使用される ‘zoom’ プロパティ上の制約の最小値ではない。

<number>

拡大率の最小値を制限する正の数。

<percentage>

拡大率の最小値を制限する正のパーセンテージ。

5.7. ‘max-zoom’ プロパティ

許容する最大の拡大率を指定する。それは、‘zoom’ の値が非 ‘auto’ を抑制する制約手順として使用するが、ユーザーインタラクションを介して設定できる許可された拡大率をまた制限できる。UA は、‘zoom’ の使用した値が ‘auto’ で、実体の拡大率を選ぶとき、制約としてこの値を使用するべきである（should）。

値は、次の意味を持つ：

‘auto’

拡大率の上限は、UA 依存である。制約手順で使用される ‘zoom’ プロパティ上の制約の最大値ではない。

<number>

拡大率の最大値を制限する正の数。

<percentage>

拡大率の最大値を制限する正のパーセンテージ。

5.8. ‘user-zoom’ プロパティ

拡大率をユーザーのインタラクションによって変更できるかどうかを指定する。

値は、次の意味を持つ：

‘zoom’

ユーザーは、インタラクティブに拡大率を変更できる。

‘fixed’

ユーザーは、インタラクティブに拡大率を変更できない。

5.9. ‘orientation’ プロパティ

このプロパティは、ドキュメントが縦長モード（portrait mode）か横長モード（landscape mode）で表示されるのかを要求するのに使用する。方向がデバイスの傾斜によって変更される UA/デバイスの場合、製作者は、方向の変更を抑制するために、このプロパティを使用することができる。

値は、次の意味を持つ：

‘auto’

UA は、自動的に操作のデバイスの通常のモードに基づいて方向を選択する。UA は、デバイスが傾いたとき、表示の向きの変更を選択してもよい（may）。

‘portrait’

ドキュメントは、縦長表示で固定されるべきである（should）。

‘landscape’

ドキュメントは、横長表示で固定されるべきである（should）。

5.10. ‘resolution’ プロパティ

このプロパティは at-risk である。

UA は、CSS 2.1 [CSS21] に記載されているように参照画素または物理的な単位は CSS ピクセルと関連している。resolution プロパティは、CSS ピクセルの解像度を設定することにより、UA によって選択された CSS ピクセルサイズを上書くのに使用できる。それ故に、CSS では絶対的な単位はお互いに関連して固定され、例えば CSS ピクセルの解像度を変更することは CSS cm の物理的な長さを変更する。

デバイスピクセルと CSS ピクセルの関連は、デバイスの解像度に依存する。240dpi のデバイス上で resolution: 120dpi の設定では、デバイスと CSS ピクセルの比率は 2:1 が提供されるが、120dpi のデバイスのとき比率は 1:1 となる。同様に、‘device’ 値は、つねに 1:1 の比率を維持するが、デバイス解像度に応じて異なる CSS ピクセルの解像度を提供する。

このプロパティが設定されていると、‘device-width’や‘device-height’、初期ビューポートのサイズに使用している長さに影響を与えることを注意されたい。

<resolution> 値は、装置識別子(‘dpi’または‘dpcm’)が直に続く正の <number> である。

値は、次の意味を持つ：

‘auto’

UA の CSS ピクセルの解像度を使用する。

‘device’

CSS ピクセルの解像度として、デバイスの解像度を使用する。つまり、CSS とデバイスピクセルは一対一の関係にある。

<resolution>

固定の dpi や dpcm の値に CSS ピクセルの解像度を設定する。

6. ビューポートプロパティ値の制約

6.1. 定義

次の手順のために：

プロパティは、プロシージャ内のその時点で解決/強要された値を参照する。彼らは、初めにこれらの計算された値が決定される。

width と height は、ショートハンドプロパティではなく分解されたビューポートサイズを参照する。これらは両方とも初期値は‘auto’である。

引数の一つが‘auto’である MIN/MAX の計算は、他の引数を解決する。例えば、MIN(0.25, 'auto') = 0.25、と MAX(5, 'auto') = 5。

initial-width は、拡大率 1.0 のときピクセル単位で初期ビューポートの幅である。

initial-height は、拡大率 1.0 のときピクセル単位で初期ビューポートの高さである。

6.2. 手順

使用される値は、以下の過程を通して計算された値から決定される。

ユーザーエージェントは、例えば、デバイスを横長モードから縦長モードに傾けたり、初期ビューポートからウィンドウをリサイズしたとき、ユーザー環境の変化に応じて、必要なら、この手順の再実行とドキュメントの再レイアウトが期待されるが、必須ではない。

ピクセル長の非‘auto’長を決定

1. ‘min-width’と‘max-width’、‘min-height’、‘max-height’プロパティためのピクセル値に相対と絶対の長さとパーセンテージ、キーワード(‘device-width’、‘device-height’)を決定する

min/max プロパティから初期の width と height を決定

1. min-width または max-width が‘auto’でないとき、width = MAX(min-width, MIN(max-width, initial-width)) を設定
2. min-height または max-height が‘auto’でないとき、height = MAX(min-height, MIN(max-height, initial-height)) を設定

min-zoom と max-zoom 値の決定

1. min-zoom が‘auto’でなく、max-zoom が‘auto’でないとき、max-zoom = MAX(min-zoom, max-zoom) を設定

[min-zoom, max-zoom] の範囲に zoom 値を制約

1. If zoom が‘auto’でないとき、zoom = MAX(min-zoom, MIN(max-zoom, zoom)) を設定

width 値の決定

1. width と zoom が両方とも ‘auto’のとき、width = initial-width を設定
2. width が ‘auto’で、height が‘auto’のとき、width = (initial-width / zoom) を設定
3. width が‘auto’のとき、width = height * (initial-width / initial-height) を設定

height 値の決定

1. height が‘auto’のとき、height = width * (initial-height / initial-width) を設定

指定された zoom のためにウィンドウ/表示エリアを埋める width と height の伸長

1. zoom または max-zoom が‘auto’でないとき、width = MAX(width, (initial-width / MIN(zoom, max-zoom))) を設定
2. zoom または max-zoom が‘auto’でないとき、height = MAX(height, (initial-height / MIN(zoom, max-zoom))) を設定

@viewport {
  width: device-width;
  zoom: 0.5;
}

7. メディアクエリー

いくつかのメディア機能について、初期包含ブロックのサイズとデバイスの向きは、メディアクエリー評価の結果に影響し、メディアクエリーの @viewport 規則の効果は、特別な注意が必要であることを意味する。

Bert: @viewport を加えたとき、@media 内に @viewport を加えることはできますか？　それは何を意味しているか？

Media Queries [MEDIAQ] 仕様より：

“式を評価するためにスタイルを適用する必要はない。これは循環依存関係を避けるためである。たとえば、印刷された文書のアスペクト比はスタイルシートに影響されるだろうが、‘device-aspect-ratio’に関わる式はユーザーエージェントが持つアスペクト比の規定値を基にする。”（この訳は、ミツエーリンクス Web標準仕様 日本語訳 メディアクエリーより引用した）

@viewport 規則については、他の規則のためにメディアクエリーが評価される前に適用されることが推奨される。

CSS 規則を適用するための推奨手順：

1. @viewport 規則を適用する。@viewport 規則がメディアクエリーに依存しているとき、初期ビューポートのビューポートプロパティを使用する。
2. スタイル規則を適用する。スタイル規則がメディアクエリーに依存しているとき、メディアクエリーを評価している際に、ステップ1から得られたビューポートプロパティを使用する。

ビューポートプロパティを使用するための原理は、スタイル規則のためのメディアクエリーを評価するために @viewport 規則を適用することから得られ、メディアクエリーは、初期またはUAスタイルシートで指定されずレイアウトされたドキュメントの実測ビューポートに一致するべきである（should）。UA スタイルシートは 980px のビューポート幅が与えられており、device-width と初期ビューポートは 320px である以下の例を考えてみる。製作者は、文書を 400px を境に初期包含ブロックの幅の見た目を良くするために別々のスタイルを用意する。実測ビューポートは、320px の幅を使用し、実測ビューポート幅にスタイルを一致させるために、@viewport 規則を適用した結果のビューポートは、メディアクエリーの評価を使用するべきである（should）。

@viewport {
  width: device-width;
}

@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 規則は、メディアクエリーまたはリフローの不要な再評価を避けるために、可能な限りドキュメント内の早くに配置されていることが推奨されている。

次の例は、メディアクエリーと @viewport 規則の間の循環依存関係を示している。UA スタイルシートのビューポート幅が 200px より大きいとするなら、最初の viewport 規則は、100px の実測ビューポートに適合する。メディアクエリーが実測ビューポートに基づくとき、再計算では、最初のメディアクエリーを正として順番に二番目の @viewport 規則を適用し、これは最初に戻ることを意味する。

@media screen and (min-width: 200px) {
  @viewport {
    width: 100px;
  }
}

@media screen and (max-width: 200px) {
  @viewport {
    width: 300px;
  }
}

デバイスの媒体特性（media feature）の実装のために接頭辞をつける（css pixel ratio (-webkit-device-pixel-ratio / -o-device-pixel-ratio)）。ここで、または新しいメディアクエリーのレベルで標準化するべきか？

8. CSSOM

CSSOM と CSSOM View 仕様のプロパティは、ビューポートと初期包含ブロックを参照されたい。それらのプロパティのいずれかが、初期ビューポートではなく実測ビューポートを参照する必要があるとき、それらの例外は、対処する必要がある。訳注：原文ではadressedだがaddressedと解釈して「対処」と訳した

window.devicePixelRatio の標準化？　もしかして CSSOM View 仕様でするべきかも？

9. 適合性

適合する UA のための要件：

• ‘min-width’と‘max-width’、‘width’、‘min-height’、‘max-height’、‘height’プロパティを、サポートしなければならない（must）。

• ‘min-zoom’と‘max-zoom’、‘zoom’プロパティを、制約手順への入力としてサポートしなければならない（must）。しかしながら、UA は、ユーザーにドキュメントを表示するとき、異なる拡大率の使用を選択し、ユーザーとのインタクションのために異なる縮小率と拡大率の限界を使用してもよい（may）。

  これは、たとえば、適合するために拡大する機能がないことを UA に許可し、それがビューポートの大きさになるとき、相互運用性の実装を持つことになる。また、コンテンツが実測ビューポートをオーバーフローしたときに、異なる拡大率の選択を UA に許可する。

• ‘user-zoom’と‘orientation’プロパティのサポートは、省略可能である。

それが保たれている場合、resolution プロパティに関して述べる必要はあるか？

10. ビューポート META 要素

このセクションは規範的ではない。

このセクションは、この仕様に記載されている @viewport 規則のプロパティへ、iPhone の Safari ブラウザに Apple によって最初に実装され、ビューポートの META 要素のコンテンツ属性からのマッピングを記述する。

10.1. UA スタイルシート

Safari の実装と一致するために、解析アルゴリズムと変換規則は、以下の UA スタイルシートに依存する。

@viewport {
  width: 980px;
  min-zoom: 0.25;
  max-zoom: 5;
}

これらの値は、すべて UA に十分に適合しないことに注意されたい。0.25 の min-zoom を使用したら、iPhone のような 320px 幅のデバイス上で、1280px までの幅をウィンドウ内にドキュメントの幅を適合することができるが、240px ディスプレイのとき 960px となる。

10.2. プロパティ

ビューポート META 要素内の認識されたプロパティは：

• width
• height
• initial-scale
• minimum-scale
• maximum-scale
• user-scalable
• target-densityDpi‘resolution’が at-risk なので、 at-risk。

10.3. 解析アルゴリズム

以下は、iPhone の Safari によるテストから生成した META タグの content 属性を解析するためのアルゴリズムである。テストは、iOS 4 のiPhone の iPod touch で行われた。ブラウザの UA 文字列は："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）が含まれている：

• 水平タブ（Horizontal tab） (0x09)
• 改行（Line feed） (0x0a)
• 復帰（Carriage return） (0x0d)
• 空白文字（Space） (0x20)

Parse-Content(S)
i ← 1
while i ≤ length[S]
    do while i ≤ length[S] and S[i] in [white-space, ',', '=']
        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 [white-space, ',', '=']
    do i ← i + 1
if i > length[S] or S[i] = ','
    then return i
property-name ← S[start .. (i - 1)]
while i ≤ length[S] and S[i] not in [',', '=']
    do i ← i + 1
if i > length[S] or S[i] = ','
    then return i
while i ≤ length[S] and S[i] in [white-space, '=']
    do i ← i + 1
if i > length[S] or S[i] = ','
    then return i
start ← i
while i ≤ length[S] and S[i] not in [white-space, ',', '=']
    do i ← i + 1
property-value ← S[start .. (i - 1)]
Set-Property(property-name, property-value)
return i

Set-Property は、大文字と小文字を区別せず記載されたプロパティ名に一致する。property-value 文字列は、以下のように解釈される：

1. property-value の接頭辞が、strtod を使用して数値に変換できるとき、値はその数値になる。文字列の残りは無視される
2. 値が上に記載したように数値に変換できないとき、全体の property-value 文字列は、次の文字列（yes、no、device-width、device-height）に大文字と小文字の区別なく一致する
3. 文字列が、既知の文字列のいずれにも一致しないとき、値は未知である

10.4. @viewport プロパティへの変換

単一の @viewport 規則のみが含まれている DOM と全く同じ位置に、それは STYLE 要素のように、ビューポートの META 要素はカスケードで配置される。

先のセクションで解析されたプロパティと値のペアのそれぞれは変換され、以下のように単一の @規則で追加される：

未知のプロパティ

未知のプロパティは削除される。

width と height プロパティ

width と height のビューポートの META プロパティは、同じ値の min と max プロパティへ効率的に設定され、‘width’や‘height’ショートハンドプロパティに変換される。

1. 負ではない数値は、ピクセル単位に変換され、[1px, 10000px] の範囲で固定される
2. 負の数値は削除される
3. device-width と device-height はキーワードとして使用される
4. 他のキーワードや未知の値は、1px に変換する

非‘auto’と‘zoom’の宣言と‘width’を持たない宣言をした @viewport 規則内で変換したビューポートの META 要素のために、@viewport 規則へ

width: auto;

を追加する。

<meta name="viewport" content="initial-scale=1.0">

@viewport {
  zoom: 1.0;
  width: auto;
}

initial-scale と minimum-scale、maximum-scale プロパティ

プロパティは、以下の値に変換され、それぞれ‘zoom’と‘min-zoom’、‘max-zoom’に変換される。

1. 負ではない数値は、<number> 値に変換され、[0.1, 10] の範囲で固定される
2. 負の数値は削除される
3. yes は 1 に変換される
4. device-width と device-height は 10 に変換される
5. no と未知の値は、0.1 に変換される。

‘max-zoom’ 宣言がなく、非‘auto’で、UA スタイルシートの‘max-zoom’値より大きい‘min-zoom’値を @viewport 規則で変換したビューポートの META 要素については、‘min-zoom’宣言値は、UA スタイルシートの‘max-zoom’値に固定される。

user-scalable プロパティ

user-scalable プロパティは、次の値の変換で、‘user-zoom’に変換される

1. yes と no は、それぞれ‘zoom’と‘fixed’に変換される。
2. 数値が 1以上、-1以下のとき、device-width と device-height は、‘zoom’にマッピングされる
3. 1 未満、-1 より大きい数値と未知の値は、‘fixed’にマッピングされる

<meta name="viewport" content="width=480, initial-scale=2.0, user-scalable=1">

@viewport {
  width: 480px;
  zoom: 2.0;
  user-zoom: zoom;
}

target-densityDpi プロパティ

‘resolution’ が at-risk なので at-risk。

このプロパティは、Android ブラウザで使用され、Safari はサポートしなかった Webkit の実装から、他とは異なる

target-densityDpi プロパティは、次の値の変換で、‘resolution’に変換される。

1. [70, 400] の範囲の数値は、‘dpi’ 値に変換される
2. device-dpi は、‘device’に変換される
3. low-dpi は、120dpi に変換される
4. medium-dpi は、160dpi に変換される
5. high-dpi は、240dpi に変換される
6. 他の値は削除される

11. ‘zoom’のための‘auto’の取り扱い

このセクションは規範的ではない。

このセクションは、使用される値が‘auto’であるとき、‘zoom’プロパティの実測値を選ぶ一つの方法を提示する。

サイズ (initial-width, initial-height)による初期ビューポートと、フォーマット構造がレンダリング(rendered-width, rendered-height)される canvas 内の有限領域が与えられる。その領域は、実測ビューポートと同じか、それ以上である。

その後、‘zoom’の使用する値が、‘auto’のとき、実測の拡大率は：

zoom = MAX(initial-width / rendered-width, initial-height / rendered-height)

実測の拡大率は、 [min-zoom, max-zoom] 範囲によって更に制限されるべきである（should）。

謝辞

参照

引用文書

[CSS21]

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607

[CSS3SYN]

L. David Baron. CSS3 module: Syntax. 13 August 2003. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2003/WD-css3-syntax-20030813

[CSS3VAL]

Håkon Wium Lie; Chris Lilley. CSS3 Values and Units. 19 September 2006. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2006/WD-css3-values-20060919

[MEDIAQ]

Håkon Wium Lie; et al. Media Queries. 27 July 2010. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/

他の文書

[Algorithms]

Thomas H. Cormen; et al. Introduction to Algorithms, Second Edition, MIT Press.

プロパティ一覧

目次

• actual viewport, 3.
• auto
  • length, 5.1.
  • max-zoom, 5.7.
  • min-zoom, 5.6.
  • orientation, 5.9.
  • resolution, 5.10.
  • zoom, 5.5.
• device, 5.10.
• device-dpi, #
• device-height, 5.1.
  • viewport META, 10.3., #, #, #
• device-width, 5.1.
  • viewport META, 10.3., #, #, #
• fixed, 5.8.
• height, 5.4.
  • initial, 6.1.
  • resolved, 6.1.
  • viewport META, 10.2., #, #
• high-dpi, #
• initial-scale, 10.2., #
• initial viewport, 3.
• landscape, 5.9.
• low-dpi, #
• max-height, 5.3.
• maximum-scale, 10.2., #
• max-width, 5.1.
• max-zoom, 5.7.
• medium-dpi, #
• min-height, 5.3.
• minimum-scale, 10.2., #
• min-width, 5.1.
• min-zoom, 5.6.
• no, 10.3., #, #
• orientation, 5.9.
• portrait, 5.9.
• resolution, 5.10.
• <resolution>, 5.10.
• target-densityDpi, 10.2., #, #
• user-scalable, 10.2., #, #
• user-zoom, 5.8.
• <viewport-length>, 5.1.
• width, 5.2.
  • initial, 6.1.
  • resolved, 6.1.
  • viewport META, 10.2., #, #
• yes, 10.3., #, #
• zoom
  • property, 5.5.
  • value, 5.8.