@viewport

翻譯不完整。 請幫助我們翻譯這篇文章！

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-width and max-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-height and max-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