/
526.txt
482 lines (362 loc) · 20.1 KB
/
526.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
* 仕様書
[REFS[
- [53] [CITE@en[Visual formatting model]], [TIME[2020-03-17 13:15:41 +09:00]] <https://drafts.csswg.org/css2/visuren.html#viewport>
]REFS]
* 意味
[3] [[連続媒体]]の[[利用者エージェント]]は、通常[[利用者]]に対して [DFN@en[[[viewport]]]]
を提供します。[[利用者]]は [[viewport]] を通じて[[文書]]にアクセスできます。
[[Viewport]] は[[窓]]その他の[RUBYB[[[画面]]]@en[screen]]上の[RUBYB[表示領域]@en[viewing area]]です。
[SRC@en[[[CSS 2.1]] 9.1.1]]
[55]
通常の [[GUI]] システム上の[[視覚的ブラウザー]]では、
[[Webページ]]を表示する[[窓]] (の[[タブ]])
のうち、
[[タイトルバー]]、[[メニューバー]]、[[ツールバー]]、[[アドレスバー]]、[[ステータスバー]]、
[[タブ]]、[[窓]]の枠線のような [[UI]] 要素を除外した、
[[Webページ]]自体の表示領域を指します。
[56]
[[Webページ]]全体を[[スクロール]]するための[[スクロールバー]]は、
[[viewport]] に含まれます。
[57]
表示領域に重なって一時的に表示されたり隠れたりする[[ステータスバー]]や、
[[スクロール]]状態によって表示されたりされなかったりする[[アドレスバー]]の類は、
[[viewport]] には含まれませんが、 [[viewport]] の大きさの決定はそれらが表示されない状態によります
[SRC[>>58]]。
* 状態
[49]
[FIG(list members)[
: [F[幅]] :
: [F[高さ]] :
: [F[scrolling box]] :
: [F[scrolling area]] :
]FIG]
* 大きさ
[54]
[[viewport]]
は[F[幅]]と[F[高さ]]の[[寸法]]を持ちます。
[63]
多くの [[Webブラウザー]]では、
[[寸法]]が動的に変化し得ます。
[[寸法]]の他、可視状態なども変化し得ます。
[SEE[ [[窓 (Web)]] ]]
[4]
[[利用者エージェント]]は [[viewport]] の大きさが変更された時に[[文書]]の[[配置]]を変更して[['''構いません''']]。
[SRC@en[[[CSS 2.1]] 9.1.1.]]
[60]
[[viewport]] のサイズが変化すると、
それによって定義されている[[初期包含ブロック]]のサイズも変化します。
[59]
[[viewport]] のサイズに連動する単位として [CODE[vh]], [CODE[vw]]
などがあります。厳密には[[初期包含ブロック]]のサイズによって決められます。
[65]
[[媒体クエリー]]の[[媒体機能]] [CODE[width]], [CODE[height]]
は
[[viewport]] の[F[幅]]と[F[高さ]]となっています。
[CODE[aspect-ratio]] と [CODE[orientation]]
もこれに関係して定義されています。
[64] [[DOM]]
では
[CODE[window.innerWidth]],
[CODE[window.innerHeight]]
でアクセスできます。
* 画布との関係
[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]] の[[内容辺]]相当 = [[詰め辺]]相当の外側で、
[[初期包含ブロック]]に含まれないと解釈するのが妥当だと思いますが・・・。
[62] 厳密な[[規定]]がどこにあるか不明ですが、
[CITE@en[CSS Values and Units Module Level 4]], [TIME[2020-05-01 10:43:32 +09:00]] <https://drafts.csswg.org/css-values/#viewport-relative-lengths>
にも[[スクロールバー]]は [[viewport]] に含まれ [[ICB]]
には含まれないと注記されています。
[CITE@en[CSSOM View Module]], [TIME[2020-05-01 10:44:00 +09:00]] <https://drafts.csswg.org/cssom-view/#dom-window-innerwidth>
と
[CITE@en[Media Queries Level 4]], [TIME[2020-05-01 14:43:54 +09:00]] <https://drafts.csswg.org/mediaqueries-4/#mf-dimensions>
には [[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[*]]]]]] などに影響します。
** 単位
[61]
[[初期包含ブロック]]の[[寸法]]によって定まる[[単位][CSSの単位]]に、
[CODE[vh]],
[CODE[vw]],
[CODE[vmin]],
[CODE[vmax]],
[CODE[vi]],
[CODE[vb]]
があります。
** 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]
* 歴史
[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>
[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]
[50] [CITE@en[Re: '''['''css-device-adapt''']''' add warning to user-scalable=no / user-zoom / etc relating to accessibility/usability?]]
([[Florian Rivoal]]著, [TIME[2016-09-30 15:22:22 +09:00]])
<https://lists.w3.org/Archives/Public/www-style/2016Sep/0130.html>
[FIG(quote)[
[FIGCAPTION[
[51] [CITE@en[Mobile Web Application Best Practices]]
([TIME[2017-10-02 19:40:59 +09:00]])
<https://www.w3.org/TR/mwabp/#bp-viewport>
]FIGCAPTION]
> 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.
]FIG]
[52] [[JavaScript]] で勝手に内容が差し替わって、前のページに戻ったりしても元と同じ内容にならないことが多いので
(ヘッドラインとか[[広告]]とかその他の[[アニメーション]]効果とか)、
[[viewport]] を常に[[録画]]しておいて一定期間内なら自由に[[巻き戻し]]て[[再生]]できたら便利そう。
[TIME[2018-04-17T04:17:59.700Z]]
[58] [CITE@en[URL Bar Resizing | Web | Google Developers]]
([TIME[2019-01-15 04:34:15 +09:00]])
<https://developers.google.com/web/updates/2016/12/url-bar-resizing>
[66] [CITE@en[Editorial: nested browsing context is a member, not a type]]
([[annevk]], [TIME[2019-11-27 02:46:03 +09:00]], [TIME[2022-01-18T10:07:30.000Z]])
<https://github.com/whatwg/html/commit/6b737bbc428facf34ec3728c0912cf9e172d0ea4>