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
|
---
title: '@viewport'
slug: Web/CSS/@viewport
tags:
- Adaptation
- At-rule
- CSS
- Device
- NeedsContent
- NeedsTranslation
- Reference
- TopicStub
translation_of: Web/CSS/@viewport
---
<p>{{CSSRef}}</p>
<h2 id="Summary">Summary</h2>
<p>The<strong> <code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.</p>
<h2 id="Syntax">Syntax</h2>
<p>A <em>zoom factor</em> of <code>1.0</code> or <code>100%</code> corresponds to no zooming. Larger values zoom in. Smaller values zoom out.</p>
<h3 id="Descriptors">Descriptors</h3>
<p>Browsers are supposed to ignore unrecognized descriptors.</p>
<dl>
<dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
<dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
<dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
<dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
<dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
<dd>A shorthand descriptor for setting both <code>min-width</code> and <code>max-width</code></dd>
<dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
<dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
<dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
<dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
<dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
<dd>A shorthand descriptor for setting both <code>min-height</code> and <code>max-height</code></dd>
<dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
<dd>Sets the initial zoom factor.</dd>
<dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
<dd>Sets the minimum zoom factor.</dd>
<dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
<dd>Sets the maximum zoom factor.</dd>
<dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
<dd>Controls whether or not the user should be able to change the zoom factor.</dd>
<dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
<dd>Controls the document's orientation.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Examples">Examples</h2>
<pre class="eval" style="font-size: 14px;">@viewport {
min-width: 640px;
max-width: 800px;
}
@viewport {
zoom: 0.75;
min-zoom: 0.5;
max-zoom: 0.9;
}
@viewport {
orientation: landscape;
}</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
<td>{{Spec2('CSS3 Device')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>29 (behind a flag) [4]</td>
<td>{{CompatNo()}} [2]</td>
<td>10 {{property_prefix("-ms")}}</td>
<td>11.10<br>
Removed in 15<br>
Reintroduced behind a flag in 16</td>
<td>{{CompatNo}} [3]</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>4.4</td>
<td>29</td>
<td>{{CompatNo}} [2]</td>
<td>10{{property_prefix("-ms")}}[1]</td>
<td>11.10<br>
Removed in 15<br>
Reintroduced behind a flag in 16</td>
<td>{{CompatNo}} [3]</td>
</tr>
</tbody>
</table>
</div>
<p>[1] There is a bug in IE Mobile 10 on older versions of Windows Phone 8, where <code>device-width</code>, when used within <code>@-ms-viewport</code>, evaluates to the screen width in physical pixels rather than normalized CSS pixels, which is wrong according to the specification. However, when used within a <code>viewport</code> {{HTMLElement("meta")}} tag, <code>device-width</code> evaluates correctly. According to Microsoft, this bug was fixed in <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Windows Phone 8 Update 3 (a.k.a. GDR3)</a>, although there are some reports that the <a href="http://www.nokia.com/us-en/windows-phone-black-update/">Lumia Black</a> GDR3 update did not fix the bug (at least on the Lumia 920). For more details and a workaround, <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">see Tim Kadlec's blog post "Windows Phone 8 and Device-Width"</a>.</p>
<p>[2]: See {{bug(747754, 'summary')}}</p>
<p>[3]: See {{webkitbug(95959)}}</p>
<p>[4]: See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=235457">Chromium issue #235457: Enable @viewport on all platforms</a></p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{HTMLElement("meta")}}, specifically <code><meta name="viewport"></code></li>
<li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li>
</ul>
|
