현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
Summary
The @viewport CSS at-rule 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.
Syntax
A zoom factor of 1.0 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.
Descriptors
Browsers are supposed to ignore unrecognized descriptors.
min-width- Used in the determination of the width of the viewport when the document is first displayed.
max-width- Used in the determination of the width of the viewport when the document is first displayed.
width- A shorthand descriptor for setting both
min-widthandmax-width min-height- Used in the determination of the height of the viewport when the document is first displayed.
max-height- Used in the determination of the height of the viewport when the document is first displayed.
height- A shorthand descriptor for setting both
min-heightandmax-height zoom- Sets the initial zoom factor.
min-zoom- Sets the minimum zoom factor.
max-zoom- Sets the maximum zoom factor.
user-zoom- Controls whether or not the user should be able to change the zoom factor.
orientation- Controls the document's orientation.
Formal syntax
@viewport {
<group-rule-body>
}
Examples
@viewport {
min-width: 640px;
max-width: 800px;
}
@viewport {
zoom: 0.75;
min-zoom: 0.5;
max-zoom: 0.9;
}
@viewport {
orientation: landscape;
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Device Adaptation The definition of '@viewport' in that specification. |
Working Draft | Initial definition |
Browser compatibility
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 29 (behind a flag) [4] | No support [2] | 10 -ms | 11.10 Removed in 15 Reintroduced behind a flag in 16 |
No support [3] |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 4.4 | 29 | No support [2] | 10-ms[1] | 11.10 Removed in 15 Reintroduced behind a flag in 16 |
No support [3] |
[1] There is a bug in IE Mobile 10 on older versions of Windows Phone 8, where device-width, when used within @-ms-viewport, 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 viewport <meta> tag, device-width evaluates correctly. According to Microsoft, this bug was fixed in Windows Phone 8 Update 3 (a.k.a. GDR3), although there are some reports that the Lumia Black GDR3 update did not fix the bug (at least on the Lumia 920). For more details and a workaround, see Tim Kadlec's blog post "Windows Phone 8 and Device-Width".
[2]: See bug 747754 – Implement @viewport at-rule
[3]: See WebKit bug 95959
[4]: See Chromium issue #235457: Enable @viewport on all platforms
See also
<meta>, specifically<meta name="viewport">- Using the viewport meta tag to control layout on mobile browsers