W3cubDocs

/CSS

@viewport

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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 29
Disabled
29
Disabled
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.
Yes
Prefixed Disabled
Yes
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -ms-
Disabled This feature is behind the Enable @-ms-viewport rules preference.
No
No
See Firefox bug 747754.
10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
16
Disabled
16
Disabled
Disabled From version 16: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
11.1 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
No
No
See WebKit bug 95959.
height descriptor 29 ? No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
16
16
11.1 — 15
No
max-height descriptor 29 ? No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
16
16
11.1 — 15
No
max-width descriptor 29 ? No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
16
16
11.1 — 15
No
max-zoom descriptor 29 Yes
Prefixed
Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
? No
min-height descriptor 29 ? No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
16
16
11.1 — 15
No
min-width descriptor 29 ? No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
16
16
11.1 — 15
No
min-zoom descriptor 29 Yes
Prefixed
Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
? No
orientation descriptor No ? No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
No ?
user-zoom descriptor 29 Yes
Prefixed
Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
? No
viewport-fit descriptor ? ? ? ? ? 11
width descriptor 29 ? No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
16
16
11.1 — 15
No
zoom descriptor 29 ? No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
16 No
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 4.4 29 Yes
Prefixed Disabled
Yes
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -ms-
Disabled This feature is behind the Enable @-ms-viewport rules preference.
No
No
See Firefox bug 747754.
? No
No
See WebKit bug 95959.
Yes
height descriptor 4.4 29 ? No 16
16
11.1 — 14
No Yes
max-height descriptor 4.4 29 ? No 16
16
11.1 — 14
No Yes
max-width descriptor 4.4 29 ? No 16
16
11.1 — 14
No Yes
max-zoom descriptor ? 29 Yes
Prefixed
Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
No ? No ?
min-height descriptor 4.4 29 ? No 16
16
11.1 — 14
No Yes
min-width descriptor 4.4 29 ? No ? No Yes
min-zoom descriptor ? 29 Yes
Prefixed
Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
No ? No ?
orientation descriptor ? ? ? ? 8
Prefixed
8
Prefixed
Prefixed Implemented with the vendor prefix: -o-
? No
user-zoom descriptor ? 29 Yes
Prefixed
Yes
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
No ? No ?
viewport-fit descriptor ? ? ? ? ? 11 ?
width descriptor 4.4 29 ? No 16
16
11.1 — 14
No Yes
zoom descriptor 4.4 61 ? No 37 ? No

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport