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 valueauto
Percentagesrefer to the size of bounding box
Computed valueas 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 compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
orientation descriptorChrome No support NoEdge No support 12 — 79
Prefixed
No support 12 — 79
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 No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support 11.1 — 14
Prefixed
No support 11.1 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also