* CSS Viewport

** 仕様書

[2] 
-[[CSS 2.1]]
--[CSECTION@en[9.1.1 The viewport]]
<http://www.w3.org/TR/2007/CR-CSS21-20070719/visuren.html#viewport>
--[CSECTION@en[10.1 Definition of "containing block"]]
<http://www.w3.org/TR/2007/CR-CSS21-20070719/visudet.html#containing-block-details>
--[CSECTION@en[11.1.1 Overflow: the [CODE(CSS)@en['overflow']] property]]
<http://www.w3.org/TR/2007/CR-CSS21-20070719/visufx.html#overflow>
--[CSECTION@en[14.2.1 Background properties: [CODE(CSS)['background-color']], [CODE(CSS)['background-image']], [CODE(CSS)['background-repeat']], [CODE(CSS)['background-attachment']], [CODE(CSS)['background-position']], and [CODE(CSS)['background']]]]
<http://www.w3.org/TR/2007/CR-CSS21-20070719/colors.html#background-properties>

** 説明

[3] [[連続媒体]]の[[利用者エージェント]]は、通常[[利用者]]に対して [DFN@en[[[viewport]]]]
を提供します。[[利用者]]は [[viewport]] を通じて[[文書]]にアクセスできます。
[[Viewport]] は[[窓]]その他の[RUBYB[[[画面]]]@en[screen]]上の[RUBYB[表示領域]@en[viewing area]]です。
[SRC@en[[[CSS 2.1]] 9.1.1]]

[4]
[[利用者エージェント]]は [[viewport]] の大きさが変更された時に[[文書]]の[[配置]]を変更して[['''構いません''']]。
[SRC@en[[[CSS 2.1]] 9.1.1.]]

** 画布との関係

[5]
[[Viewport]] が[[画布]]中の[[文書]]が[[レンダリング]]されている[RUBYB[[[領域]]]@en[area]]より小さい時、
[[利用者エージェント]]は[[スクロール機構]]を提供する[['''べきです''']]。
[SRC@en[[[CSS 2.1]] 9.1.1]]

[6]
[[画布]]1つに対して [[viewport]] は高々1つです。
[SRC@en[[[CSS 2.1]] 9.1.1]]

** 包含ブロックとしての viewport

[9] [[連続媒体]]では、[[根要素]]の基準となる[[包含ブロック]]は [[viewport]]
の[[次元]]を持つ[[矩形]]です。これを[DFN[[[初期包含ブロック]]]]と呼びます。
[[画布]]の[[原点]]がその[[原点]]となります。
[SRC@en[[[CSS 2.1]] 10.1]]

*** 固定配置

[8]
[CODE(CSS)@en[[[position]]: [[fixed]]]] ([[固定配置]]) の[[箱]]については、
[[包含ブロック]]が [[viewport]] により[[確立]]されます。
[SRC@en[[[CSS 2.1]] 9.6.1, 10.1]]

[7]
[CODE(CSS)@en[[[position]]: [[fixed]]]] ([[固定配置]])
の[[箱]]は、
-[[媒体型]]が [CODE(CSS)@en[[[handheld]]]]、[CODE(CSS)@en[[[projection]]]]、
[CODE(CSS)@en[[[screen]]]]、[CODE(CSS)@en[[[tty]]]]、
[CODE(CSS)@en[[[tv]]]] の場合、 [[viewport]] に対して固定され、[[スクロール]]によって移動しません。
-[[媒体型]]が [CODE(CSS)@en[[[print]]]] の場合、[[頁]]が [[viewport]]
を通じて見られる場合 (例えば[[印刷プレビュー]]の時) であっても [[viewport]]
ではなく[[頁箱]]に対して固定されます。

[SRC@en[[[CSS 2.1]] 9.3.1]]

[10] 
[[固定配置要素]]に関する[[静的位置]]の算出においては、
[[固定配置要素]]の[[包含ブロック]]は [[viewport]]
ではなく[[初期包含ブロック]]であるものとみなします。
[SRC@en[[[CSS 2.1]] 10.3.7, 10.6.4]]

;; 同じなのでは?

** 背景

[12] [CODE(CSS)@en[[[background-attachment]]: [[fixed]]]] は[[背景画像]]を
[[viewport]] に対して固定します
[SRC@en[[[CSS 2.1]] 14.2.1]]。

[13] >>12 の場合、 [CODE(CSS)@en[[[background-attachment]]]] は [[viewport]]
を基準に解釈されます [SRC@en[[[CSS 2.1]] 14.2.1]]。

** スクロール

[11] [[HTML文書]]で [CODE(HTMLe)@en[[[html]]]] [[要素]]の [CODE(CSS)@en[[[overflow]]]]
[[算出値]]が [CODE(CSS)@en[[[visible]]]] の場合、 [CODE(HTMLe)@en[[[body]]]]
[[要素]]の [CODE(CSS)@en[[[overflow]]]] [[算出値]]が [[viewport]] に適用されます。
それ以外の場合、[[根要素]]の [CODE(CSS)@en[[[overflow]]]] が [[viewport]]
に適用されます。 [[Viewport]] に適用された[[要素]]の [CODE(CSS)@en[[[overflow]]]]
の[[使用値]]は [CODE(CSS)@en[[[visible]]]] になります。
[[Viewport]] の [CODE(CSS)@en[[[overflow]]]] が [CODE(CSS)@en[[[visible]]]]
の場合、 [CODE(CSS)@en[[[auto]]]] と解釈されます。
[SRC@en[[[CSS 2.1]] 11.1.1]]

* [CODE(HTML)@en[<meta name=viewport>]]

[1]
[CITE[Mapion touch - A blog? with Σαιτω]] ([TIME[2008-02-09 23:15:11 +09:00]] 版) <http://d.hatena.ne.jp/saiton/20071112/1194870931>