[3] 連続媒体の利用者エージェントは、通常利用者に対して viewport を提供します。利用者は viewport を通じて文書にアクセスできます。 Viewport は窓その他の画面上の表示領域です。 CSS 2.1 9.1.1
[55] 通常の GUI システム上の視覚的ブラウザーでは、 Webページを表示する窓 (のタブ) のうち、 タイトルバー、メニューバー、ツールバー、アドレスバー、ステータスバー、 タブ、窓の枠線のような UI 要素を除外した、 Webページ自体の表示領域を指します。
[56] Webページ全体をスクロールするためのスクロールバーは、 viewport に含まれます。
[57] 表示領域に重なって一時的に表示されたり隠れたりするステータスバーや、 スクロール状態によって表示されたりされなかったりするアドレスバーの類は、 viewport には含まれませんが、 viewport の大きさの決定はそれらが表示されない状態によります >>58。
[63]
多くの 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 が画布中の文書がレンダリングされている領域より小さい時、 利用者エージェントはスクロール機構を提供するべきです。 CSS 2.1 9.1.1
[6] 画布1つに対して viewport は高々1つです。 CSS 2.1 9.1.1
[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
[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, https://drafts.csswg.org/css-values/#viewport-relative-lengths にもスクロールバーは viewport に含まれ ICB には含まれないと注記されています。 CSSOM View Module, https://drafts.csswg.org/cssom-view/#dom-window-innerwidth と Media Queries Level 4, https://drafts.csswg.org/mediaqueries-4/#mf-dimensions には viewport にスクロールバーが含まれると明記されています。 (わざわざ明記が必要なのは、単一の厳密な規定を欠くためとも思われます。)
[14] 本来 CSS の viewport は1つの矩形ですが、 便宜上箱同様に内容辺/内容箱、 境界辺/境界箱という用語を使います。
[15] 通常 CSS によって何らかの形でアクセス可能なのは内容箱・スクロール・バーとその内側だけです。 その外側の境界線は、あったとしても Webブラウザの利用者界面に属するものです。
[16] WinIE の奇癖モードでは、 body
要素の
border
が viewport の境界領域になります。
border
を指定しない場合や標準モードでは既定の境界がレンダリングされ、
CSSOM offset*
などに影響します。
[61]
初期包含ブロックの寸法によって定まる単位に、
vh
,
vw
,
vmin
,
vmax
,
vi
,
vb
があります。
document.body.scroll*
window.pageXOffset
, window.pageYOffset
(WinIE 以外)window.scrollX
, window.scrollY
(WinIE, Opera 以外)<meta name=viewport>
[45] 多くの場合、次のようにするのが適切です。
<meta name="viewport" content="width=device-width,initial-scale=1">
'overflow'
property
http://www.w3.org/TR/2007/CR-CSS21-20070719/visufx.html#overflow'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 Σαιτω ( 版) 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/
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/
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.
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
<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" />-->
<!--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>
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
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
[66] Editorial: nested browsing context is a member, not a type (annevk, , ) https://github.com/whatwg/html/commit/6b737bbc428facf34ec3728c0912cf9e172d0ea4