]>
この文書は CSS Device Adaptation (W3C Working Draft 15 September 2011) を日本語訳したものです。最新の文書は http://www.w3.org/TR/css-device-adapt/ です。原文もしくは最新の情報を参照したい場合は、CSS Device Adaptation を参照ください。
この日本語訳は参考です。公式な文書ではありません。翻訳・解釈の正確性を保証しておりません。
なお、いくつかの訳語は、ミツエーリンクスサイトのWeb標準仕様 日本語訳のメディアクエリーを参考にしました。
Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
この仕様は初期包含ブロック(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 の 草案の初版である。
@viewport
規則
META
要素
zoom
’のための‘auto
’の取り扱いこのセクションは規範的ではない。
CSS 2.1 [CSS21] は、ピューポートのサイズを持つ連続メディアのための初期包含ブロックを指定する。モバイルやハンドヘルドデバイスのブラウザは、一般的に、CSS 2.1 によって推奨される CSS のピクセルサイズが与える縮尺レベルにおいて、デスクトップブラウザのウィンドウに比べより狭いビューポートを持つ。
狭いビューポートは、デスクトップブラウザで見栄えがするようにデザインされた文書のための課題である。この結果として、モバイルブラウザのベンダーは、ビューポートサイズとは異なって、典型的なデスクトップブラウザのウィンドウのそれに近い固定の初期包含ブロックサイズを使用する。加えて、スクロールやパン、拡大は、読書や対話をするために文書の全体と文書の特定エリアの拡大の変更に頻繁に使用される。
そのような訳で、いくつかの DOCTYPE(例えば、XHTML Mobile Profile の場合)は、初期包含ブロックサイズとしてビューポートサイズを使用し、ハンドヘルドデバイスのために設計されているという前提でモバイル文書と認識して使用される。
さらに、HTML の META
タグは、製作者が初期包含ブロックと直接的に初期の拡大率のサイズを指定するために導入された。最初に Safari/iPhone のブラウザのために Apple によって実装され、その後、Opera、Android、Fennec のブラウザに実装された。これらの実装は、完全な相互運用性ではなく、CSS のビューポート META
タグによって提供される機能の標準化の試みである。
この仕様は、[CSS3SYN] の CSS プロパティの定義規則に従う。
値型は、[CSS3VAL] で定義される。
この仕様は、ユーザーエージェント(UA)によって提供されるビューポートのサイズを上書きする方法を紹介する。このため、私たちは初期ビューポートと実測ビューポート間の違いを取り入れる必要がある。
実測ビューポートが初期ビューポートより大きいか、拡大率が実測ビューポートの部分だけを表示させたり、実測ビューポートがウィンドウまたは表示エリアの内側に収まらないとき、UA はスクロールやパンのメカニズムを提示するべきである(should)。
これは、ドキュメントの基本方向が左から右(ltr)のとき、初期状態では実測ビューポートとウィンドウまたは表示エリアの左上の角に揃っていることが推奨される。同様に、基本方向が右から左(rtl)のとき、右上の角に整列する。ドキュメントの基本方向は、HTML または XHTML ドキュメントの最初の BODY
要素のための direction
プロパティの計算された値として定義される。他のドキュメントタイプの場合、root 要素のために計算された direction
である。
"dbaron: これは、デスクトップブラウザ上で何をするものなのか?(そして、デスクトップブラウザは何か)。"最新のモバイルの動作のために参照される UA スタイルシートとは対照的に、"デスクトップ"ブラウザは、典型的に UA スタイルを持たないと言う必要があり、@viewport のための UA スタイルシートは、デフォルト(実測ビューポートは初期ビューポート)を通して"デスクトップ"の動作に提供しない。
@viewport
規則@viewport
の @規則は、ピューポートを記述するプロパティ宣言のブロックに続く @keyword で構成される。
@viewport
規則内部のプロパティ宣言は、ドキュメントのプロパティごとで、継承の影響はない。従って、‘inherit
’キーワードを使用する宣言は省略される。これらは @page
プロパティと同様に働き、CSS のカスケード順に従う。従って、@viewport
規則内のプロパティは、前述の規則からプロパティを上書きする。その結果、宣言は、プロパティのカスケーディングに影響をおよぼす !important を許可する。
@viewport 規則は、トップレベルドキュメントのみに適用する必要があるか? そうでなければ、フレーム内の異なる拡大率について言及する必要がある。
Bert: @viewport と @page の相互作用は何か?
この例は、デバイスの幅に合わせてピューポートを設定する。高さは幅から決定されるので、幅を設定するだけで十分であることに注意されたい。
@viewport { width: device-width; }
@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* ;
このセクションは、@viewport
規則内に許可されているプロパティを提示する。ここに記載されたもの以外のプロパティは削除される。
相対的な長さの値は、初期値に対して解決される。例えば、‘em
’は、font-size プロパティの初期値に対して解決される。
min-width
’ と ‘max-width
’ プロパティ名前: | min-width |
値: | <viewport-length> |
初期値: | auto |
適用対象: | なし |
継承: | なし |
パーセンテージ: | 初期ビューポートの width を参照されたい |
媒体: | visual, continuous |
計算値: | 指定の‘auto ’、‘device-width ’、‘device-height ’、絶対的な長さ、またはパーセント値 |
名前: | max-width |
値: | <viewport-length> |
初期値: | auto |
適用対象: | なし |
継承: | なし |
パーセンテージ: | 初期ビューポートの width を参照されたい |
媒体: | visual, continuous |
計算値: | 指定の‘auto ’、‘device-width ’、‘device-height ’、絶対的な長さ、またはパーセント値 |
初期包含ブロックサイズの設定で使用されるビューポートの最小と最大の幅を指定し、
<viewport-length> = auto | device-width | device-height | <length> | <percentage>
値は次の意味を有する:
auto
’device-width
’device-height
’正の絶対値または相対的な長さ。
それぞれの水平と垂直の長さのために、拡大率 1.0 のときの初期ビューポートの幅または高さに対するパーセンテージの値。正の値でなければならない(must)。
min-width と max-width プロパティは、制約手順へ入力される。幅は、最初に最小/最大の制約内にできるだけ近い初期ビューポートに設定される。
width
’ ショートハンドプロパティ名前: | width |
値: | <viewport-length>{1,2} |
初期値: | 各プロパティを参照 |
適用対象: | なし |
継承: | なし |
パーセンテージ: | 各プロパティを参照 |
媒体: | visual, continuous |
計算値: | 各プロパティを参照 |
これは min-width と max-width の両方を設定するためのショートハンドプロパティである。一つの <viewport-length> 値は、min-width と max-width の両方の値を設定する。二つの <viewport-length> 値は、一つ目の値は min-width、2つ目の値は max-width を設定する。
min-height
’ と ‘max-height
’ プロパティ名前: | min-height |
値: | <viewport-length> |
初期値: | auto |
適用対象: | なし |
継承: | なし |
パーセンテージ: | 初期ビューポートの height を参照されたい |
媒体: | visual, continuous |
計算値: | 指定の‘auto ’、‘device-width ’、‘device-height ’、絶対的な長さ、またはパーセント値 |
名前: | max-height |
値: | <viewport-length> |
初期値: | auto |
適用対象: | なし |
継承: | なし |
パーセンテージ: | 初期ビューポートの height を参照されたい |
媒体: | visual, continuous |
計算値: | 指定の‘auto ’、‘device-width ’、‘device-height ’、絶対的な長さ、またはパーセント値 |
初期包含ブロックサイズの設定で使用されるビューポートの最小と最大の高さを指定。
min-height と max-height プロパティは、制約手順へ入力される。高さは、最初に最小/最大の制約内にできるだけ近い初期ビューポートに設定される。
height
’ ショートハンドプロパティ名前: | height |
値: | <viewport-length>{1,2} |
初期値: | 各プロパティを参照 |
適用対象: | なし |
継承: | なし |
パーセンテージ: | 各プロパティを参照 |
媒体: | visual, continuous |
計算値: | 各プロパティを参照 |
これは min-height と max-height の両方を設定するためのショートハンドプロパティである。一つの <viewport-length> 値は、min-height と max-height の両方の値を設定する。二つの <viewport-length> 値は、一つ目の値は min-height、2つ目の値は max-height を設定する。
zoom
’ プロパティ名前: | zoom |
値: | auto | <number> | <percentage> |
初期値: | auto |
適用対象: | なし |
継承: | なし |
パーセンテージ: | 拡大率そのもの |
媒体: | visual, continuous |
計算値: | 指定の‘auto ’、もしくは整数またはパーセンテージ。 |
ウィンドウや表示エリアのための初期拡大率を指定する。これは拡大の虫眼鏡タイプである。初期拡大率から拡大率をインタラクティブに変更しても、初期または実測ビューポートのサイズに影響しない。
値は、次の意味を持つ:数字とパーセンテージの両方が許可されるべきか?
auto
’zoom
’ の ‘auto
’ 値を処理するために提案された方法は、このセクションを参照されたい。正の数字は拡大率として使用する。1.0 は、拡大が行われないことを意味する。1.0 より大きな値は、ズームインの効果、1.0 より小さな値は、ズームアウトの効果を与える。
正のパーセンテージ値は、拡大率として使用する。100% 拡大は、拡大が行われないことを意味する。100% より大きな値は、ズームインの効果、100% より小さな値は、ズームアウトの効果を与える。
min-zoom
’ プロパティ名前: | min-zoom |
値: | auto | <number> | <percentage> |
初期値: | auto |
適用対象: | なし |
継承: | なし |
パーセンテージ: | 拡大率そのもの |
媒体: | visual, continuous |
計算値: | 指定の‘auto ’、もしくは整数またはパーセンテージ。 |
許容する最小の拡大率を指定する。それは、‘zoom
’ の値が非 ‘auto
’ を抑制する制約手順として使用するが、ユーザーインタラクションを介して設定できる許可された拡大率をまた制限できる。UA は、‘zoom
’ の使用した値が ‘auto
’ で、実体の拡大率を選ぶとき、制約としてこの値を使用するべきである(should)。
値は、次の意味を持つ:
auto
’zoom
’ プロパティ上の制約の最小値ではない。拡大率の最小値を制限する正の数。
拡大率の最小値を制限する正のパーセンテージ。
max-zoom
’ プロパティ名前: | max-zoom |
値: | auto | <number> | <percentage> |
初期値: | auto |
適用対象: | なし |
継承: | なし |
パーセンテージ: | 拡大率そのもの |
媒体: | visual, continuous |
計算値: | 指定の‘auto ’、もしくは整数またはパーセンテージ。 |
許容する最大の拡大率を指定する。それは、‘zoom
’ の値が非 ‘auto
’ を抑制する制約手順として使用するが、ユーザーインタラクションを介して設定できる許可された拡大率をまた制限できる。UA は、‘zoom
’ の使用した値が ‘auto
’ で、実体の拡大率を選ぶとき、制約としてこの値を使用するべきである(should)。
値は、次の意味を持つ:
auto
’zoom
’ プロパティ上の制約の最大値ではない。拡大率の最大値を制限する正の数。
拡大率の最大値を制限する正のパーセンテージ。
user-zoom
’ プロパティ名前: | user-zoom |
値: | zoom | fixed |
初期値: | zoom |
適用対象: | なし |
継承: | なし |
パーセンテージ: | なし |
媒体: | visual, continuous |
計算値: | 指定の‘zoom ’または‘fixed ’ |
拡大率をユーザーのインタラクションによって変更できるかどうかを指定する。
値は、次の意味を持つ:
zoom
’fixed
’orientation
’ プロパティ名前: | orientation |
値: | auto | portrait | landscape |
初期値: | auto |
適用対象: | なし |
継承: | なし |
パーセンテージ: | なし |
媒体: | visual, continuous |
計算値: | 指定の‘auto ’または‘portrait ’、‘landscape ’。 |
このプロパティは、ドキュメントが縦長モード(portrait mode)か横長モード(landscape mode)で表示されるのかを要求するのに使用する。方向がデバイスの傾斜によって変更される UA/デバイスの場合、製作者は、方向の変更を抑制するために、このプロパティを使用することができる。
値は、次の意味を持つ:
auto
’portrait
’landscape
’resolution
’ プロパティこのプロパティは at-risk である。
名前: | resolution |
値: | auto | device | <resolution> |
初期値: | auto |
適用対象: | なし |
継承: | なし |
パーセンテージ: | なし |
媒体: | visual, continuous |
計算値: | 指定の‘auto ’や‘device ’、resolution 値。 |
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
’device
’次の手順のために:
プロパティは、プロシージャ内のその時点で解決/強要された値を参照する。彼らは、初めにこれらの計算された値が決定される。
width
と height
は、ショートハンドプロパティではなく分解されたビューポートサイズを参照する。これらは両方とも初期値は‘auto
’である。
引数の一つが‘auto
’である MIN/MAX
の計算は、他の引数を解決する。例えば、MIN(0.25, 'auto') = 0.25
、と MAX(5, 'auto') = 5
。
initial-width
は、拡大率 1.0 のときピクセル単位で初期ビューポートの幅である。
initial-height
は、拡大率 1.0 のときピクセル単位で初期ビューポートの高さである。
使用される値は、以下の過程を通して計算された値から決定される。
ユーザーエージェントは、例えば、デバイスを横長モードから縦長モードに傾けたり、初期ビューポートからウィンドウをリサイズしたとき、ユーザー環境の変化に応じて、必要なら、この手順の再実行とドキュメントの再レイアウトが期待されるが、必須ではない。
auto
’長を決定min-width
’と‘max-width
’、‘min-height
’、‘max-height
’プロパティためのピクセル値に相対と絶対の長さとパーセンテージ、キーワード(‘device-width
’、‘device-height
’)を決定する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))
を設定min-zoom
と max-zoom
値の決定[min-zoom, max-zoom]
の範囲に zoom
値を制約zoom
が‘auto
’でないとき、zoom = MAX(min-zoom, MIN(max-zoom, zoom))
を設定width
値の決定width
と zoom
が両方とも ‘auto
’のとき、width = initial-width
を設定width
が ‘auto
’で、height
が‘auto
’のとき、width = (initial-width / zoom)
を設定width
が‘auto
’のとき、width = height * (initial-width / initial-height)
を設定height
値の決定height
が‘auto
’のとき、height = width * (initial-height / initial-width)
を設定zoom
のためにウィンドウ/表示エリアを埋める width
と height
の伸長zoom
または max-zoom
が‘auto
’でないとき、width = MAX(width, (initial-width / MIN(zoom, max-zoom)))
を設定zoom
または max-zoom
が‘auto
’でないとき、height = MAX(height, (initial-height / MIN(zoom, max-zoom)))
を設定この例は、幅のために使用する値は、指定された zoom 値でウィンドウ/表示エリアに合わせて増加されるのを示している。幅のための使用する値は、device-width が初期ビューポートの幅と同じであると過程するなら、この場合、二倍の device-width である。
@viewport { width: device-width; zoom: 0.5; }
いくつかのメディア機能について、初期包含ブロックのサイズとデバイスの向きは、メディアクエリー評価の結果に影響し、メディアクエリーの @viewport
規則の効果は、特別な注意が必要であることを意味する。
Bert: @viewport を加えたとき、@media 内に @viewport を加えることはできますか? それは何を意味しているか?
Media Queries [MEDIAQ] 仕様より:
“式を評価するためにスタイルを適用する必要はない。これは循環依存関係を避けるためである。たとえば、印刷された文書のアスペクト比はスタイルシートに影響されるだろうが、‘device-aspect-ratio’に関わる式はユーザーエージェントが持つアスペクト比の規定値を基にする。”(この訳は、ミツエーリンクス Web標準仕様 日本語訳 メディアクエリーより引用した)
@viewport
規則については、他の規則のためにメディアクエリーが評価される前に適用されることが推奨される。
CSS 規則を適用するための推奨手順:
@viewport
規則を適用する。@viewport
規則がメディアクエリーに依存しているとき、初期ビューポートのビューポートプロパティを使用する。ビューポートプロパティを使用するための原理は、スタイル規則のためのメディアクエリーを評価するために @viewport
規則を適用することから得られ、メディアクエリーは、初期またはUAスタイルシートで指定されずレイアウトされたドキュメントの実測ビューポートに一致するべきである(should)。UA スタイルシートは 980px のビューポート幅が与えられており、device-width と初期ビューポートは 320px である以下の例を考えてみる。製作者は、文書を 400px を境に初期包含ブロックの幅の見た目を良くするために別々のスタイルを用意する。実測ビューポートは、320px の幅を使用し、実測ビューポート幅にスタイルを一致させるために、@viewport
規則を適用した結果のビューポートは、メディアクエリーの評価を使用するべきである(should)。
320px の device-width と 980px の UA スタイルシートのビューポート幅が与えられているとき、最初のメディアクエリーは一致しないが、次はそうなる。
@viewport { width: device-width; } @media screen and (min-width: 400px) { div { color: red; } } @media screen and (max-width: 400px) { div { color: green; } }
他の例:
@viewport
規則は、メディアクエリーが評価する前に適用されるため、以下のメディアクエリーは、一致するべきである(should)。
@media screen and (width: 397px) { div { color: green; } } @viewport { width: 397px; }
以下は、ビューポートプロパティの影響を受け、メディアクエリーに依存した @viewport
規則の例である。
緑色は、初期ビューポートの幅は、二つ目の @viewport
規則のメディアクエリーの評価のために使用されるから、div に適用されるべきであるが(should)、実測ビューポートは、スタイル規則を適用されるときにメディアクエリーの評価のために使用される。
@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))。ここで、または新しいメディアクエリーのレベルで標準化するべきか?
CSSOM と CSSOM View 仕様のプロパティは、ビューポートと初期包含ブロックを参照されたい。それらのプロパティのいずれかが、初期ビューポートではなく実測ビューポートを参照する必要があるとき、それらの例外は、対処する必要がある。訳注:原文ではadressedだがaddressedと解釈して「対処」と訳した
window.devicePixelRatio の標準化? もしかして CSSOM View 仕様でするべきかも?
適合する 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 プロパティに関して述べる必要はあるか?
META
要素このセクションは規範的ではない。
このセクションは、この仕様に記載されている @viewport
規則のプロパティへ、iPhone の Safari ブラウザに Apple によって最初に実装され、ビューポートの META
要素のコンテンツ属性からのマッピングを記述する。
Safari の実装と一致するために、解析アルゴリズムと変換規則は、以下の UA スタイルシートに依存する。
@viewport { width: 980px; min-zoom: 0.25; max-zoom: 5; }
これらの値は、すべて UA に十分に適合しないことに注意されたい。0.25 の min-zoom を使用したら、iPhone のような 320px 幅のデバイス上で、1280px までの幅をウィンドウ内にドキュメントの幅を適合することができるが、240px ディスプレイのとき 960px となる。
ビューポート META
要素内の認識されたプロパティは:
width
height
initial-scale
minimum-scale
maximum-scale
user-scalable
target-densityDpi
‘resolution
’が at-risk なので、 at-risk。以下は、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)が含まれている:
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
文字列は、以下のように解釈される:
property-value
の接頭辞が、strtod
を使用して数値に変換できるとき、値はその数値になる。文字列の残りは無視されるproperty-value
文字列は、次の文字列(yes
、no
、device-width
、device-height
)に大文字と小文字の区別なく一致する@viewport
プロパティへの変換単一の @viewport
規則のみが含まれている DOM と全く同じ位置に、それは STYLE
要素のように、ビューポートの META
要素はカスケードで配置される。
先のセクションで解析されたプロパティと値のペアのそれぞれは変換され、以下のように単一の @規則で追加される:
未知のプロパティは削除される。
width
と height
プロパティwidth
と height
のビューポートの META
プロパティは、同じ値の min と max プロパティへ効率的に設定され、‘width
’や‘height
’ショートハンドプロパティに変換される。
[1px, 10000px]
の範囲で固定されるdevice-width
と device-height
はキーワードとして使用される非‘auto
’と‘zoom
’の宣言と‘width
’を持たない宣言をした @viewport
規則内で変換したビューポートの META
要素のために、@viewport
規則へ
width: auto;
を追加する。
この META
要素は:
<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
’に変換される。
[0.1, 10]
の範囲で固定されるyes
は 1 に変換されるdevice-width
と device-height
は 10 に変換されるno
と未知の値は、0.1 に変換される。‘max-zoom
’ 宣言がなく、非‘auto
’で、UA スタイルシートの‘max-zoom
’値より大きい‘min-zoom
’値を @viewport
規則で変換したビューポートの META
要素については、‘min-zoom
’宣言値は、UA スタイルシートの‘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; }
target-densityDpi
プロパティ‘resolution
’ が at-risk なので at-risk。
このプロパティは、Android ブラウザで使用され、Safari はサポートしなかった Webkit の実装から、他とは異なる
target-densityDpi
プロパティは、次の値の変換で、‘resolution
’に変換される。
[70, 400]
の範囲の数値は、‘dpi
’ 値に変換されるdevice-dpi
は、‘device
’に変換されるlow-dpi
は、120dpi に変換されるmedium-dpi
は、160dpi に変換されるhigh-dpi
は、240dpi に変換される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)。
プロパティ | 値 | 初期値 | 適用対象 | 継承 | パーセンテージ | 媒体 |
---|---|---|---|---|---|---|
height | <viewport-length>{1,2} | 各プロパティを参照 | なし | なし | 各プロパティを参照 | visual, continuous |
max-height | <viewport-length> | auto | なし | なし | 初期ビューポートの width を参照されたい | visual, continuous |
max-width | <viewport-length> | auto | なし | なし | 初期ビューポートの width を参照されたい | visual, continuous |
max-zoom | auto | <number> | <percentage> | auto | なし | なし | 拡大率そのもの | visual, continuous |
min-height | <viewport-length> | auto | なし | なし | 初期ビューポートの height を参照されたい | visual, continuous |
min-width | <viewport-length> | auto | なし | なし | 初期ビューポートの height を参照されたい | visual, continuous |
min-zoom | auto | <number> | <percentage> | auto | なし | なし | 拡大率そのもの | visual, continuous |
orientation | auto | portrait | landscape | auto | なし | なし | なし | visual, continuous |
resolution | auto | device | <resolution> | auto | なし | なし | なし | visual, continuous |
user-zoom | zoom | fixed | zoom | なし | なし | なし | visual, continuous |
width | <viewport-length>{1,2} | 各プロパティを参照 | なし | なし | 各プロパティを参照 | visual, continuous |
zoom | auto | <number> | <percentage> | auto | なし | なし | 拡大率そのもの | visual, continuous |