CSS Media Queries interpret the device orientation in a completely different way if we think in terms of JavaScript APIs. The CSS specifications clearly state that orientation modes are treated by browsers only as a relationship between the widh and height of the viewport. It does not have anything to do with APIs or whether you can rotate your screen.
Consider the following code:
@media screen and (orientation: landscape ) {
p {
color: green;
}
}
@media screen and (orientation: portrait ) {
p {
color: blue;
}
}
If the width of the viewport is greater than its height (e.g. 1920 x 800 ), only the first condition is true. If you resize your browser's window so that the viewport's height is greater than its width (e.g. 600 x 800 ), only the second condition is true.
As you can see, everything is related to the ratio created by the dimensions of the viewport. To sum up: in CSS orientation does not depend on the device, rather, it depends on whether or not the height is greater than width (portrait) or vice versa (landscape).
