W3cubDocs

/CSS

@viewport.orientation

The orientation CSS descriptor controls the orientation of a document defined by @viewport.

/* Keyword values */
orientation: auto;
orientation: portrait;
orientation: landscape;

For a UA/device where the orientation is changed upon tilting the device, an author can use this descriptor to inhibit the orientation change.

Syntax

Values

auto
The user agent will set the document's orientation automatically, typically based on the device's orientation as determined by an accelerometer (if the device has such a hardware sensor), although there is often a user-controlled, OS-level "Lock orientation" setting that will trump the accelerometer reading.
portrait
The document should be locked into portrait orientation.
landscape
The document should be locked into landscape orientation.

Formal definition

Related at-rule @viewport
Initial value auto
Percentages refer to the size of bounding box
Computed value as specified

Formal syntax

auto | portrait | landscape

Examples

Setting viewport orientation

@viewport {
  orientation: landscape;
}

Specifications

Specification Status Comment
CSS Device Adaptation
The definition of '"orientation" descriptor' in that specification.
Working Draft Initial definition

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
orientation descriptor No 12 — 79
Prefixed
12 — 79
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
No 10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
orientation descriptor No No No 11.1 — 14
Prefixed
11.1 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
No No

See also

© 2005–2020 Mozilla 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/orientation