This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The @viewport CSS at-rule lets you configure the viewport through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).

Lengths specified as percentages are calculated relative to the initial viewport, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport. This is typically based on the size of the window on desktop browsers that aren't in full screen mode.

On mobile devices (or desktop devices that are in full screen mode), the initial viewport is usually the portion of a device's screen that is available for application use. This may be either the full screen or the full screen area minus areas controlled by the operating system (such as a taskbar) or the application-available screen area (either the full screen or the screen minus any areas owned by the operating system or other applications).

@viewport {
  width: device-width;
}

Syntax

The at-rule contains a set of nested descriptors in a CSS block that is delimited by curly braces.

A zoom factor of 1.0 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.

Descriptors

Browser support for @viewport is weak at this time, with support being largely available in Internet Explorer and Edge. Even in those browsers, only a small number of descriptors are available. Browsers will ignore @viewport if they don't support it, and will ignore any descriptors that they don't recognize.

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.
viewport-fit
Controls the display of the document on non-rectangular displays.

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 Round Display Level 1
The definition of '@viewport' in that specification.
Working Draft Defined the viewport-fit descriptor.
CSS Device Adaptation
The definition of '@viewport' in that specification.
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 29
Notes Disabled
Full support 29
Notes Disabled
Notes See Chromium bug 235457.
Disabled From version 29: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
Edge Full support Yes
Prefixed Disabled
Full support Yes
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -ms-
Disabled This feature is behind the Enable @-ms-viewport rules preference.
Firefox No support No
Notes
No support No
Notes
Notes See Firefox bug 747754.
IE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Disabled
Full support 16
Disabled
Disabled From version 16: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
No support 11.1 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari No support No
Notes
No support No
Notes
Notes See WebKit bug 95959.
WebView Android Full support 4.4Chrome Android Full support 29Edge Mobile Full support Yes
Prefixed Disabled
Full support Yes
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -ms-
Disabled This feature is behind the Enable @-ms-viewport rules preference.
Firefox Android No support No
Notes
No support No
Notes
Notes See Firefox bug 747754.
Opera Android ? Safari iOS No support No
Notes
No support No
Notes
Notes See WebKit bug 95959.
Samsung Internet Android Full support Yes
height descriptorChrome Full support 29Edge ? Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android Full support 4.4Chrome Android Full support 29Edge Mobile ? Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support Yes
max-height descriptorChrome Full support 29Edge ? Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android Full support 4.4Chrome Android Full support 29Edge Mobile ? Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support Yes
max-width descriptorChrome Full support 29Edge ? Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android Full support 4.4Chrome Android Full support 29Edge Mobile ? Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support Yes
max-zoom descriptorChrome Full support 29Edge Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera ? Safari No support NoWebView Android ? Chrome Android Full support 29Edge Mobile Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox Android No support NoOpera Android ? Safari iOS No support NoSamsung Internet Android ?
min-height descriptorChrome Full support 29Edge ? Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android Full support 4.4Chrome Android Full support 29Edge Mobile ? Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support Yes
min-width descriptorChrome Full support 29Edge ? Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android Full support 4.4Chrome Android Full support 29Edge Mobile ? Firefox Android No support NoOpera Android ? Safari iOS No support NoSamsung Internet Android Full support Yes
min-zoom descriptorChrome Full support 29Edge Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera ? Safari No support NoWebView Android ? Chrome Android Full support 29Edge Mobile Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox Android No support NoOpera Android ? Safari iOS No support NoSamsung Internet Android ?
orientation descriptor
Experimental
Chrome No support NoEdge ? Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera No support NoSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android Full support 8
Prefixed
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS ? Samsung Internet Android No support No
user-zoom descriptorChrome Full support 29Edge Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera ? Safari No support NoWebView Android ? Chrome Android Full support 29Edge Mobile Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox Android No support NoOpera Android ? Safari iOS No support NoSamsung Internet Android ?
viewport-fit descriptor
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari Full support 11WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Full support 11Samsung Internet Android ?
width descriptorChrome Full support 29Edge ? Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android Full support 4.4Chrome Android Full support 29Edge Mobile ? Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support Yes
zoom descriptorChrome Full support 29Edge ? Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16Safari No support NoWebView Android Full support 4.4Chrome Android Full support 61Edge Mobile ? Firefox Android No support NoOpera Android Full support 37Safari iOS ? Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

Document Tags and Contributors

Last updated by: chrisdavidmills,