blob: ed5c585a7e1de932e72fd2233dccd63959cbb506 (
plain)
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
|
---
title: width
slug: Web/CSS/@viewport/width
translation_of: Web/CSS/@viewport
translation_of_original: Web/CSS/@viewport/width
---
<div>{{CSSRef}}</div>
<p>The <strong>width</strong> CSS descriptor is shorthand for setting both the <a href="/zh-CN/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a> and the <a href="/zh-CN/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a> descriptors of the viewport. By providing one viewport length value, that value will determine both the <code>min-width</code> and the <code>max-width</code> to the value provided.</p>
<p>If two viewport values are provided the first value will be set to the <code>min-width</code> and the second value will be set <code>max-width</code>.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="brush: css">/* An example with one viewport value: */
@viewport {
width: 320px;
}
/* An example with two viewport values: */
@viewport {
width: 320px, 120px;
}
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
<dt><code>auto</code></dt>
<dd>The used value is calculated from the other CSS descriptors' values.</dd>
<dt><code><length></code></dt>
<dd>A non-negative absolute or relative length.</dd>
<dt><code><percentage></code></dt>
<dd>A percentage value relative to the width or height of the <span class="css">initial viewport</span> at zoom factor 1.0, for horizontal and vertical lengths respectively. Must be non-negative.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">auto <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><length></a> <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/percentage" title=""><percentage></a></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', '#descdef-viewport-min-width', '"min-width" descriptor')}}</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" style="height: 93px; width: 950px;">
<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)</td>
<td>{{CompatNo}}</td>
<td>10 {{property_prefix("-ms")}}</td>
<td>11.10<br>
Removed in 15<br>
Reintroduced behind a flag in 16</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table" style="height: 93px; width: 948px;">
<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>
<table class="compat-table">
<tbody>
<tr>
<td>4.4</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="compat-table">
<tbody>
<tr>
<td>29</td>
</tr>
</tbody>
</table>
</td>
<td>{{CompatNo}}</td>
<td>10{{property_prefix("-ms")}}</td>
<td>11.10<br>
Removed in 15<br>
Reintroduced behind a flag in 16</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
|
