CSS - orientation

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

Syntax  

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

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 syntax

CSS
auto <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> portrait <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> landscape

Description  

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

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

Related at-rule@viewport
Initial valueauto
Percentagesrefer to the size of bounding box
Mediavisual, continuous
Computed valueas specified
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported Not supported 10 -ms Not supported ?
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? 8 -o ?

Specifications  

Specification Status Comment
CSS Device Adaptation
The definition of '"orientation" descriptor' 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/orientation

CSS CSS Descriptor NeedsBrowserCompatibility NeedsExample Reference