Hi,
I’m playing a bit with the regular browser media queries and noticed that there’s no square value for orientation. And more surprisingly, the definition of portrait orientation includes the square orientation:
The orientation media feature is portrait when the value of the height media feature is greater than or equal to the value of the width media feature. […] Otherwise orientation is landscape.
So the only way to query a square viewport is by using the aspect-ratio media query:
@media (aspect-ratio: 1/1) {
/* css declarations for a square visual output */
}Trying to understand this decision, I made some research and discovered that in the definition of page orientation, a square matches both the portrait and the landscape definitions:
A portrait page’s height is greater than or equal to its width. […] A landscape page’s width is greater than or equal to its height.
There’s also this note:
Note that CSS3 makes no distinction between landscape and reverse-landscape orientations. However, future versions of CSS may do so.
This note made me realize that orientation definition in the specs doesn’t seek to define the shape ratio of the visual output (screen, papers…): shape ratio is thus reserved for… aspect-ratio. So, the orientation definition looks a bit more like “okay, so the orientation is more like… the way you will hold the physical output: most of the time people use sheets of paper the portrait way, so it’ll only be landscape if they rotate the sheet, and the printed content won’t reflow or rotate backwards to stay in the right orientation in front of your head”. You can hold the device portrait or landscape, but you can’t hold it square, because it’s not an orientation.
I wrote a small pen to try to illustrate what I mean.
I don’t know if I’m correctly interpreting the spec or not, and I find the spec a bit confusing on this topic.