閲覧領域

閲覧領域

仕様書

[2]

意味

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

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

状態

[49]

scrolling box
scrolling area

画布との関係

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

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

包含ブロックとしての viewport

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

固定配置

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

[7] position: fixed (固定配置) のは、

CSS 2.1 9.3.1

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

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

背景

[12] background-attachment: fixed背景画像viewport に対して固定します CSS 2.1 14.2.1

[13] >>12 の場合、 background-attachmentviewport を基準に解釈されます CSS 2.1 14.2.1

スクロール

[11] HTML文書html 要素overflow 算出値visible の場合、 body 要素overflow 算出値viewport に適用されます。 それ以外の場合、根要素overflowviewport に適用されます。 Viewport に適用された要素overflow使用値visible になります。 Viewportoverflowvisible の場合、 auto と解釈されます。 CSS 2.1 11.1.1

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

内容辺、境界辺

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

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

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

CSSOM による大きさの取得

内容箱

Firefox

[17]

Safari

[18]

Opera

[20]

WinIE

[22]

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

Firefox

[24]

Safari

[25]

Opera

[19]

境界箱

WinIE

[21]

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

[23]

<meta name=viewport>

[45] 多くの場合、次のようにするのが適切です。

<meta name="viewport" content="width=device-width,initial-scale=1">

歴史

[1] Mapion touch - A blog? with Σαιτω ( 版) <http://d.hatena.ne.jp/saiton/20071112/1194870931>

[27] ニンテンドーDSiブラウザー:Q&A ( 版) <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] Travellers Tales : iPod touch/iPhone の viewport 属性の区切りはセミコロンではなくカンマ ( 版) <http://travel-lab.info/tech/pblog/article.php?id=154>

[29] IRC logs: freenode / #whatwg / 20090915 ( 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20090915#l-322>

[30] Safari Dev Center: Safari HTML Reference: Supported Meta Tags ( 版) <http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html>

[31] Developing Web Applications for Internet Explorer Mobile 6 on Windows Mobile 6.5 ( 版) <http://msdn.microsoft.com/en-us/library/dd938878.aspx>

[32] CSS Device Adaptation ( ( 版)) <http://dev.w3.org/csswg/css-device-adapt/>

[33] Android のブラウザは

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

[34] Introduction – SVG 1.1 (Second Edition) ( ( 版)) <http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermViewport>

[35] CSS Device Adaptation ( ( 版)) <http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/>

[36] IRC logs: freenode / #whatwg / 20120315 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20120315#l-469>

[37] Targeting Screens from Web Apps | Android Developers ( ( 版)) <http://developer.android.com/guide/webapps/targeting.html>

[38] Bug 101217 – Remove support for "desktop-width" in the viewport meta tag ( ( 版)) <https://bugs.webkit.org/show_bug.cgi?id=101217>

[39] Re: Addressing space outside a document's root element ( (Boris Zbarsky 著, 版)) <http://lists.w3.org/Archives/Public/www-style/2013May/0303.html>

[40] Widget Interface ( ( 版)) <http://www.w3.org/TR/widgets-apis/#viewport>

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

[42] Safari 7.1 ( 版) <https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_1.html#//apple_ref/doc/uid/TP40014305-CH6-SW2>

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.

[43] Safari 9.0 ( 版) <https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW36>

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“>

[44] Gloss the term "viewport" · whatwg/html@d530547 ( 版) <https://github.com/whatwg/html/commit/d53054738717895fe534a4e1a1e5e3600be695ac>

[46] ( 版) <http://taart-design.com/>

<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" />-->

[47] 365LIFE 不動産・賃貸セレクトショップ静岡県浜松 ( ()) <http://365life-realestate.com/>

<!--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>

[48] UC mobile phone browser (U3 kernel) related documentation ( ()) <http://www.programering.com/a/MDNxAjMwATU.html>

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 +

[50] Re: [css-device-adapt] add warning to user-scalable=no / user-zoom / etc relating to accessibility/usability? (Florian Rivoal著, ) <https://lists.w3.org/Archives/Public/www-style/2016Sep/0130.html>

[51] Mobile Web Application Best Practices () <https://www.w3.org/TR/mwabp/#bp-viewport>

the term "JavaScript" is used in place of the (arguably more correct) term "ECMAScript" in order to provide consistency with the companion Web application technologies (JSON and AJAX) which are in common use and both implicitly refer to JavaScript in their names.

[52] JavaScript で勝手に内容が差し替わって、前のページに戻ったりしても元と同じ内容にならないことが多いので (ヘッドラインとか広告とかその他のアニメーション効果とか)、 viewport を常に録画しておいて一定期間内なら自由に巻き戻し再生できたら便利そう。