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