CSS - @viewport

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.

Example

 

CSS
@viewport {
  min-width: 640px;
  max-width: 800px;
}
@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}
@viewport {
  orientation: landscape;
}

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

CSS
@viewport {
  <group-rule-body>
}

Description  

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.

Browser Compatibility  

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 – [CSS-WD] implement CSS Device Adaptation

[3]: See WebKit bug 95959

[4]: See Chromium issue #235457: Enable @viewport on all platforms

See Also  

Specifications  

Specification Status Comment
CSS Device Adaptation
The definition of '@viewport' in that specification.
Working Draft Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@viewport

Adaptation At-rule CSS Device NeedsContent Reference