viewport

viewport

仕様書

意味

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

[55] 通常の GUI システム上の視覚的ブラウザーでは、 Webページを表示する (のタブ) のうち、 タイトルバーメニューバーツールバーアドレスバーステータスバータブの枠線のような UI 要素を除外した、 Webページ自体の表示領域を指します。

[56] Webページ全体をスクロールするためのスクロールバーは、 viewport に含まれます。

[57] 表示領域に重なって一時的に表示されたり隠れたりするステータスバーや、 スクロール状態によって表示されたりされなかったりするアドレスバーの類は、 viewport には含まれませんが、 viewport の大きさの決定はそれらが表示されない状態によります >>58

状態

[49]

高さ
scrolling box
scrolling area

大きさ

[54] viewport高さ寸法を持ちます。

[63] 多くの Webブラウザーでは、 寸法が動的に変化し得ます。 寸法の他、可視状態なども変化し得ます。 窓 (Web)

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

[60] viewport のサイズが変化すると、 それによって定義されている初期包含ブロックのサイズも変化します。

[59] viewport のサイズに連動する単位として vh, vw などがあります。厳密には初期包含ブロックのサイズによって決められます。

[65] 媒体クエリー媒体機能 width, heightviewport高さとなっています。 aspect-ratioorientation もこれに関係して定義されています。

[64] DOM では window.innerWidth, window.innerHeight でアクセスできます。

画布との関係

[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内容辺相当 = 詰め辺相当の外側で、 初期包含ブロックに含まれないと解釈するのが妥当だと思いますが・・・。

[62] 厳密な規定がどこにあるか不明ですが、 CSS Values and Units Module Level 4, https://drafts.csswg.org/css-values/#viewport-relative-lengths にもスクロールバーviewport に含まれ ICB には含まれないと注記されています。 CSSOM View Module, https://drafts.csswg.org/cssom-view/#dom-window-innerwidthMedia Queries Level 4, https://drafts.csswg.org/mediaqueries-4/#mf-dimensions には viewportスクロールバーが含まれると明記されています。 (わざわざ明記が必要なのは、単一の厳密な規定を欠くためとも思われます。)

内容辺、境界辺

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

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

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

単位

[61] 初期包含ブロック寸法によって定まる単位に、 vh, vw, vmin, vmax, vi, vb があります。

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

歴史

[2]

[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 を常に録画しておいて一定期間内なら自由に巻き戻し再生できたら便利そう。

[58] URL Bar Resizing  |  Web  |  Google Developers () https://developers.google.com/web/updates/2016/12/url-bar-resizing