CSS - orientation

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


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


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.
The document should be locked into portrait orientation.
The document should be locked into landscape orientation.

Formal syntax

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


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 ?


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


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

CSS CSS Descriptor NeedsBrowserCompatibility NeedsExample Reference