526.txt

* 仕様書

[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.]]

* 状態

[49] 
[FIG(short list)[
: [F[scrolling box]] :
: [F[scrolling area]] :
]FIG]

* 画布との関係

[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]]

;; [[初期包含ブロック]]は常に[[画布]]の[[原点]]に錨付けされていますが、
[[viewport]] の[[画布]]に対する位置は変化します。

** 背景

[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]]

[26] [[スクロール・バー]]が現れる時の [[viewport]]、あるいは[[初期包含ブロック]]に[[スクロール・バー]]の領域が含まれるのかどうかは不明です。
普通の[[箱]]の場合を類推すると [[viewport]] の[[内容辺]]相当 = [[詰め辺]]相当の外側で、
[[初期包含ブロック]]に含まれないと解釈するのが妥当だと思いますが・・・。

** 内容辺、境界辺

[14] 本来 [[CSS]] の [[viewport]] は1つの[[矩形]]ですが、
便宜上[[箱]]同様に[DFN[[RUBYB[[[内容辺]]]@en[content edge]]]]/[DFN[[RUBYB[内容箱]@en[content box]]]]、
[DFN[[RUBYB[[[境界辺]]]@en[border edge]]]]/[DFN[[RUBYB[境界箱]@en[border box]]]]という用語を使います。

[15] 通常 [[CSS]] によって何らかの形でアクセス可能なのは[[内容箱]]・[[スクロール・バー]]とその内側だけです。
その外側の[[境界線]]は、あったとしても [[Webブラウザ]]の[[利用者界面]]に属するものです。

[16] [[WinIE]] の[[奇癖モード]]では、 [CODE(HTMLe)@en[[[body]]]] [[要素]]の
[CODE(CSS)@en[[[border]]]] が [[viewport]] の[[境界領域]]になります。
[CODE(CSS)@en[[[border]]]] を指定しない場合や[[標準モード]]では既定の境界が[[レンダリング]]され、
[[CSSOM]] [CODE(DOMa)@en[[[offset[VAR[*]]]]]] などに影響します。

** CSSOM による大きさの取得

*** 内容箱

**** Firefox

[17] 
- [[無奇癖モード]]
-- [CODE(JS)@en[[[document]].[[documentElement]].[[client*]]]]
- [[奇癖モード]]
-- [CODE(JS)@en[[[document]].[[body]].[[client*]]]]
--- ただし、 [CODE(HTMLe)@en[[[html]]]], [CODE(HTMLe)@en[[[body]]]] の両方が
[CODE(CSS)@en[[[overflow]]]] による[[スクロール・バー]]を持つ場合を除きます。

**** Safari

[18]
- [[無奇癖モード]]
-- [CODE(JS)@en[[[document]].[[documentElement]].[[client*]]]]
- [[奇癖モード]]
-- [CODE(JS)@en[[[document]].[[body]].[[client*]]]]
([CODE(DOMa)@en[[[clientTop]]]]、[CODE(DOMa)@en[[[clientLeft]]]] に
[CODE(HTMLe)@en[[[body]]]] の [CODE(CSS)@en[[[border-top-width]]]]、
[CODE(CSS)@en[[[border-left-width]]]] が入ります。)

**** Opera

[20]
- [[無奇癖モード]]
-- [CODE(JS)@en[[[document]].[[documentElement]].[[client*]]]]
- [[奇癖モード]]
-- [CODE(JS)@en[[[document]].[[body]].[[client*]]]]
-- [CODE(JS)@en[[[document]].[[documentElement]].[[client*]]]] (横方向のみ)

**** WinIE

[22]
- [[無奇癖モード]]
-- [CODE(JS)@en[[[document]].[[documentElement]].[[offset*]]]]
-- [CODE(JS)@en[[[document]].[[documentElement]].[[client*]]]] ([[境界辺]]が[[原点]])
- [[奇癖モード]]
-- [CODE(JS)@en[[[document]].[[body]].[[client*]]]]

*** 内容箱 + スクロール・バー

**** Firefox

[24] 
- [CODE(JS)@en[[[window.innerWidth]]]], [CODE(JS)@en[[[document.innerHeight]]]]

**** Safari

[25] 
- [CODE(JS)@en[[[window.innerWidth]]]], [CODE(JS)@en[[[document.innerHeight]]]]

**** Opera

[19]
- [[奇癖モード]]
-- [CODE(JS)@en[[[document]].[[body]].[[offset*]]]]
- [CODE(JS)@en[[[window.innerWidth]]]], [CODE(JS)@en[[[document.innerHeight]]]]

*** 境界箱

**** WinIE

[21] 
-[[奇癖モード]]
-- [CODE(JS)@en[[[document]].[[documentElement]].[[offset*]]]]
-- [CODE(JS)@en[[[document]].[[body]].[[offset*]]]]
-- [CODE(JS)@en[[[document]].[[documentElement]].[[scroll*]]]]
- [CODE(JS)@en[[[document]].[[documentElement]].[[getBoundingClientRect]]()]]

*** Viewport と初期包含ブロックのずれ

[23] 
- 原則として
-- [[無奇癖モード]]: [CODE(JS)@en[[[document]].[[documentElement]].[[scroll*]]]]
-- [[奇癖モード]]: [CODE(JS)@en[[[document]].[[body]].[[scroll*]]]]
--- ただし、[[Firefox]] で [CODE(HTMLe)@en[[[html]]]], [CODE(HTMLe)@en[[[body]]]] の両方が
[CODE(CSS)@en[[[overflow]]]] による[[スクロール・バー]]を持つ場合を除きます。
- [[Safari]] では常に: [CODE(JS)@en[[[document]].[[body]].[[scroll*]]]]
- [CODE(JS)@en[[[window.pageXOffset]]]], [CODE(JS)@en[[[window.pageYOffset]]]] ([[WinIE]] 以外)
- [CODE(JS)@en[[[window.scrollX]]]], [CODE(JS)@en[[[window.scrollY]]]] ([[WinIE]], [[Opera]] 以外)

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

[EG[
[45] 多くの場合、次のようにするのが適切です。
[PRE(HTML code)[
<[[meta]] [[name]]="[[viewport]]" [[content]]="[[width]]=[[device-width]],[[initial-scale]]=1">
]PRE]
]EG]

** 歴史

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

[27] [CITE@ja[ニンテンドーDSiブラウザー:Q&A]] ([TIME[2008-12-16 10:58:36 +09:00]] 版) <http://www.nintendo.co.jp/ds/dsiware/hngj/q_and_a.html>

>
Q.19
>	ニンテンドーDSiブラウザーでうまく表示できるホームページを作りたいのですが・・・
>
A.19
>	<meta name="viewport" content="width=240" /> を HTML の <head>...</head> 内に指定することで、幅240px高さ352pxで、横スクロール縮小表示無く、2画面が縦につながった状態でHTMLを表示させることができます。
>
ページレイアウトをpx(ピクセル)単位ではなくて、%(パーセンテージ)を基準として行われている場合は、<meta name="viewport" content="width=device-width" /> を指定してください。

[28] [CITE@ja[Travellers Tales : iPod touch/iPhone の viewport 属性の区切りはセミコロンではなくカンマ]] ([TIME[2009-01-19 15:29:59 +09:00]] 版) <http://travel-lab.info/tech/pblog/article.php?id=154>

[29] [CITE[IRC logs: freenode / #whatwg / 20090915]]
([TIME[2009-10-31 11:41:27 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20090915#l-322>

[30] [CITE@en[Safari Dev Center: Safari HTML Reference: Supported Meta Tags]]
([TIME[2009-12-09 23:16:02 +09:00]] 版)
<http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html>

[31] [CITE@en-us[Developing Web Applications for Internet Explorer Mobile 6 on Windows Mobile 6.5]]
([TIME[2010-06-09 17:30:37 +09:00]] 版)
<http://msdn.microsoft.com/en-us/library/dd938878.aspx>

[32] [CITE@en[CSS Device Adaptation]]
( ([TIME[2010-11-03 06:00:41 +09:00]] 版))
<http://dev.w3.org/csswg/css-device-adapt/>

[33] [[Android]] のブラウザは
[PRE(JS example code)[
var div = document.createElement ('div');
div.innerHTML = '<meta name=viewport content="width=device-width">';
]PRE]
... のようなコードを実行するだけでなぜかページの一番上にスクロールされます。

[34] [CITE[Introduction – SVG 1.1 (Second Edition)]]
( ([TIME[2011-08-10 12:35:27 +09:00]] 版))
<http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermViewport>

[35] [CITE@en[CSS Device Adaptation]]
( ([TIME[2011-09-15 02:28:23 +09:00]] 版))
<http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/>

[36] [CITE[IRC logs: freenode / #whatwg / 20120315]]
( ([TIME[2012-03-21 08:57:20 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120315#l-469>

[37] [CITE[Targeting Screens from Web Apps | Android Developers]]
( ([TIME[2012-07-07 16:39:23 +09:00]] 版))
<http://developer.android.com/guide/webapps/targeting.html>

[38] [CITE[Bug 101217 – Remove support for "desktop-width" in the viewport meta tag]]
( ([TIME[2012-11-18 06:38:51 +09:00]] 版))
<https://bugs.webkit.org/show_bug.cgi?id=101217>

[39] [CITE@en[Re: Addressing space outside a document's root element]]
( ([[Boris Zbarsky]] 著, [TIME[2013-05-13 23:01:45 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2013May/0303.html>

[40] [CITE[Widget Interface]]
( ([TIME[2013-10-29 00:58:56 +09:00]] 版))
<http://www.w3.org/TR/widgets-apis/#viewport>

[41] [CITE@ja[これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ - てっく煮ブログ]]
([TIME[2014-09-16 00:48:23 +09:00]] 版)
<http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/>

[FIG(quote)[
[FIGCAPTION[
[42] [CITE@en[Safari 7.1]]
([TIME[2015-11-04 23:12:55 +09:00]] 版)
<https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_1.html#//apple_ref/doc/uid/TP40014305-CH6-SW2>
]FIGCAPTION]

> A new property, minimal-ui, has been added for the "viewport" metatag in iOS to allow minimizing the top and bottom bars as a page loads on iPhone. For example:
> <meta name="viewport" content="width=1024, minimal-ui">
> Tapping the top bar brings the bars back; tapping back in the content dismisses them again.

]FIG]


[FIG(quote)[
[FIGCAPTION[
[43] [CITE@en[Safari 9.0]]
([TIME[2015-11-04 23:18:05 +09:00]] 版)
<https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW36>
]FIGCAPTION]

> Viewport meta tags using "width = content-width" cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding "shrink-to-fit = no" to your meta tag as shown below. The added value will prevent the page from scaling to fit the viewport.
> <meta name = "viewport" content = "width = content-width, initial-scale = 1.0, shrink-to-fit = no“>

]FIG]


[44] [CITE@en[Gloss the term "viewport" · whatwg/html@d530547]]
([TIME[2016-02-27 11:43:59 +09:00]] 版)
<https://github.com/whatwg/html/commit/d53054738717895fe534a4e1a1e5e3600be695ac>

[FIG(quote)[
[FIGCAPTION[
[46] ([TIME[2016-04-18 15:10:24 +09:00]] 版)
<http://taart-design.com/>
]FIGCAPTION]

> 
>     <meta name="viewport" content="target-densitydpi=device-dpi, width=1030, maximum-scale=1.5, user-scalable=yes">
>     <!--<meta name="viewport" content="width=device-width,initial-scale=1.0" />-->

]FIG]


[FIG(quote)[
[FIGCAPTION[
[47] [CITE[365LIFE 不動産・賃貸セレクトショップ静岡県浜松]]
( ([TIME[2016-05-16 14:02:21 +09:00]]))
<http://365life-realestate.com/>
]FIGCAPTION]

> 
> <!--jsでviewportを切り替えるタブレットは1010pxでPC表示、スマホは端末に合わせて表示-->
> <script type="text/javascript">
> if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
> 	    document.write('<meta name="viewport" content="initial-scale=1.0">');
> 	}else{
> 	    document.write('<meta name="viewport" content="width=1010">');
> 	}
> </script>

]FIG]


[FIG(quote)[
[FIGCAPTION[
[48] [CITE@en-US[UC mobile phone browser (U3 kernel) related documentation]]
( ([TIME[2016-06-01 19:23:42 +09:00]]))
<http://www.programering.com/a/MDNxAjMwATU.html>
]FIGCAPTION]

> Description: after the opening, when the scaling operation, only magnified images and text and other elements on the page, but not enlarged screen width, thus avoiding the or so the scroll bar.
> Parameters:
> uc-fitscreen=no: Do not open the '''['''default''']'''
> uc-fitscreen=yes: Open
> Usage:
> 1 <!--  Open UC to fit the screen layout  -->
> 2 <meta name="viewport" content="uc-fitscreen=yes"/>
> Versioning support: 8.5 patch +

]FIG]