orientation

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.

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

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

Enumerated values

Examples

Specifications

Browser compatibility

Document Tags and Contributors