MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

orientation is a CSS media feature that can be used to check what the orientation of the viewport is.

Enumerated values

Value Meaning
portrait The device is in a portrait orientation (i.e. height is more than width)
landscape The device is in a landscape orientation (i.e. width is more than height)

Examples

body {
  display: flex;
}

@media screen and (orientation: landscape){
  body {
    flex-direction: row;
  }
}

@media screen and (orientation: portrait){
  body {
    flex-direction: column;
  }
}

Specifications

Specification Status Comment
Media Queries
The definition of 'orientation' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

 

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, auramgold, mrenty, kscarfone, cvrebert
 Last updated by: chrisdavidmills,