大きさ [54]
viewport
は幅 と高さ の寸法 を持ちます。
[63]
多くの Webブラウザー では、
寸法 が動的に変化し得ます。
寸法 の他、可視状態なども変化し得ます。
窓 (Web)
[4]
利用者エージェント は viewport の大きさが変更された時に文書 の配置 を変更して構いません CSS 2.1 9.1.1.
[60]
viewport のサイズが変化すると、
それによって定義されている初期包含ブロック のサイズも変化します。
[59]
viewport のサイズに連動する単位として vh, vw
などがあります。厳密には初期包含ブロック のサイズによって決められます。
[65]
媒体クエリー の媒体機能 width, height
は
viewport の幅 と高さ となっています。
aspect-ratio と orientation
もこれに関係して定義されています。
[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 固定配置 )
の箱 は、
媒体型 が handheld projection screen tty tv viewport に対して固定され、スクロール によって移動しません。媒体型 が print 頁 が viewport
を通じて見られる場合 (例えば印刷プレビュー の時) であっても viewport
ではなく頁箱 に対して固定されます。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-attachment viewport
を基準に解釈されます CSS 2.1 14.2.1
スクロール [11] HTML文書 で html 要素 の overflow 算出値 が visible body 要素 の overflow 算出値 が viewport に適用されます。
それ以外の場合、根要素 の overflow viewport
に適用されます。 Viewport に適用された要素 の overflow 使用値 は visible Viewport の overflow visible auto CSS 2.1 11.1.1
[26] スクロール・バー が現れる時の viewport 、あるいは初期包含ブロック にスクロール・バー の領域が含まれるのかどうかは不明です。
普通の箱 の場合を類推すると viewport の内容辺 相当 = 詰め辺 相当の外側で、
初期包含ブロック に含まれないと解釈するのが妥当だと思いますが・・・。
[62] 厳密な規定 がどこにあるか不明ですが、
CSS Values and Units Module Level 4 , 2020-05-01 10:43:32 +09:00 https://drafts.csswg.org/css-values/#viewport-relative-lengths
にもスクロールバー は viewport に含まれ ICB
には含まれないと注記されています。
CSSOM View Module , 2020-05-01 10:44:00 +09:00 https://drafts.csswg.org/cssom-view/#dom-window-innerwidth
と
Media Queries Level 4 , 2020-05-01 14:43:54 +09:00 https://drafts.csswg.org/mediaqueries-4/#mf-dimensions
には viewport にスクロールバー が含まれると明記されています。
(わざわざ明記が必要なのは、単一の厳密な規定を欠くためとも思われます。)
内容辺、境界辺 [14] 本来 CSS の viewport は1つの矩形 ですが、
便宜上箱 同様に内容辺 content edge 内容箱content box 境界辺 border edge 境界箱border box
[15] 通常 CSS によって何らかの形でアクセス可能なのは内容箱 ・スクロール・バー とその内側だけです。
その外側の境界線 は、あったとしても Webブラウザ の利用者界面 に属するものです。
[16] WinIE の奇癖モード では、 body 要素 の
border viewport の境界領域 になります。
border 標準モード では既定の境界がレンダリング され、
CSSOM offset*
単位 [61]
初期包含ブロック の寸法 によって定まる単位CSSの単位 に、
vh,
vw,
vmin,
vmax,
vi,
vb
があります。
CSSOM による大きさの取得 内容箱 Firefox [17]
無奇癖モード document .documentElement .client* 奇癖モード document .body .client* ただし、 html body overflow スクロール・バー を持つ場合を除きます。 Safari [18]
無奇癖モード document .documentElement .client* 奇癖モード document .body .client* clientTop clientLeft body border-top-width border-left-width Opera [20]
無奇癖モード document .documentElement .client* 奇癖モード document .body .client* document .documentElement .client* WinIE [22]
無奇癖モード document .documentElement .offset* document .documentElement .client* 境界辺 が原点 )奇癖モード 内容箱 + スクロール・バー Firefox [24]
window.innerWidth document.innerHeight Safari [25]
window.innerWidth document.innerHeight Opera [19]
奇癖モード window.innerWidth document.innerHeight 境界箱 WinIE [21]
奇癖モード document .documentElement .offset* document .body .offset* document .documentElement .scroll* document .documentElement .getBoundingClientRect ()Viewport と初期包含ブロックのずれ [23]
原則として無奇癖モード : document .documentElement .scroll* 奇癖モード : document .body .scroll* ただし、Firefox で html body overflow スクロール・バー を持つ場合を除きます。 Safari では常に: document .body .scroll* window.pageXOffset window.pageYOffset WinIE 以外)window.scrollX window.scrollY WinIE , Opera 以外)歴史 [2]
CSS 2.1 9.1.1 The viewport
http://www.w3.org/TR/2007/CR-CSS21-20070719/visuren.html#viewport 10.1 Definition of "containing block"
http://www.w3.org/TR/2007/CR-CSS21-20070719/visudet.html#containing-block-details 11.1.1 Overflow: the 'overflow' property
http://www.w3.org/TR/2007/CR-CSS21-20070719/visufx.html#overflow 14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'
http://www.w3.org/TR/2007/CR-CSS21-20070719/colors.html#background-properties [1]
Mapion touch - A blog? with Σαιτω (2008-02-09 23:15:11 +09:00 版) http://d.hatena.ne.jp/saiton/20071112/1194870931
[27] ニンテンドーDSiブラウザー:Q&A (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] Travellers Tales : iPod touch/iPhone の viewport 属性の区切りはセミコロンではなくカンマ (2009-01-19 15:29:59 +09:00 版) http://travel-lab.info/tech/pblog/article.php?id=154
[29] IRC logs: freenode / #whatwg / 20090915
(2009-10-31 11:41:27 +09:00 版)
http://krijnhoetmer.nl/irc-logs/whatwg/20090915#l-322
[30] Safari Dev Center: Safari HTML Reference: Supported Meta Tags
(2009-12-09 23:16:02 +09:00 版)
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
(2010-06-09 17:30:37 +09:00 版)
http://msdn.microsoft.com/en-us/library/dd938878.aspx
[32] CSS Device Adaptation
( (2010-11-03 06:00:41 +09:00 版))
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)
( (2011-08-10 12:35:27 +09:00 版))
http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermViewport
[35] CSS Device Adaptation
( (2011-09-15 02:28:23 +09:00 版))
http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/
[36] IRC logs: freenode / #whatwg / 20120315
( (2012-03-21 08:57:20 +09:00 版))
http://krijnhoetmer.nl/irc-logs/whatwg/20120315#l-469
[37] Targeting Screens from Web Apps | Android Developers
( (2012-07-07 16:39:23 +09:00 版))
http://developer.android.com/guide/webapps/targeting.html
[38] Bug 101217 – Remove support for "desktop-width" in the viewport meta tag
( (2012-11-18 06:38:51 +09:00 版))
https://bugs.webkit.org/show_bug.cgi?id=101217
[39] Re: Addressing space outside a document's root element
( (Boris Zbarsky 著, 2013-05-13 23:01:45 +09:00 版))
http://lists.w3.org/Archives/Public/www-style/2013May/0303.html
[40] Widget Interface
( (2013-10-29 00:58:56 +09:00 版))
http://www.w3.org/TR/widgets-apis/#viewport
[41] これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ - てっく煮ブログ
(2014-09-16 00:48:23 +09:00 版)
http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/
[42] Safari 7.1
(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 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
(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 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
(2016-02-27 11:43:59 +09:00 版)
https://github.com/whatwg/html/commit/d53054738717895fe534a4e1a1e5e3600be695ac
[46] (2016-04-18 15:10:24 +09:00 版)
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 不動産・賃貸セレクトショップ静岡県浜松
( (2016-05-16 14:02:21 +09:00 ))
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
( (2016-06-01 19:23:42 +09:00 ))
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 著, 2016-09-30 15:22:22 +09:00 )
https://lists.w3.org/Archives/Public/www-style/2016Sep/0130.html
[51] Mobile Web Application Best Practices
(2017-10-02 19:40:59 +09:00 )
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 を常に録画 しておいて一定期間内なら自由に巻き戻し て再生 できたら便利そう。
2018-04-17T04:17:59.700Z
[58] URL Bar Resizing | Web | Google Developers
(2019-01-15 04:34:15 +09:00 )
https://developers.google.com/web/updates/2016/12/url-bar-resizing
[66] Editorial: nested browsing context is a member, not a type
(annevk , 2019-11-27 02:46:03 +09:00 , 2022-01-18T10:07:30.000Z )
https://github.com/whatwg/html/commit/6b737bbc428facf34ec3728c0912cf9e172d0ea4