The Media Queries spec [1] currently defines the "device-aspect-ratio"
media feature which allows queries on the aspect ratio of the device.
For example, one can query whether the device is portrait or landscape:
@media screen and (max-device-aspect-ratio: 1/1) /* portrait or square */
@media screen and (min-device-aspect-ratio: 1/1) /* landscape or square */
Recently, two arguments have been made concerning the aspect ratio.
First, it is argued that the aspect ration of the device isn't that
interesting, one should (instead/also) query the aspect ratio of the
window. This can be accomplished by (say) adding the "aspect-ratio"
query in additon to "device-aspect-ratio". One could then write:
@media screen and (max-aspect-ratio: 1/1) /* portrait or square */
@media screen and (min-aspect-ratio: 1/1) /* landscape or square */
Second, it has been argued that the most common use case for
aspect-ratio is to find out whether the window is in portrait or
landscape mode. If this is the case, the code could be made more
intuitive by adding keywords. For example:
@media screen and (aspect-ratio: portrait)
@media screen and (aspect-ratio: landscape)
Or just:
@media screen and (aspect: portrait)
@media screen and (aspect: landscape)
Or even:
@media screen and (portrait)
@media screen and (landscape)
Before drawing conclusions, it seems worthwhile to collect use cases
for aspect ratio. Do we care about devices, windows, or both? What
kind of queries do people want to write? What kind of media features
and values are needed to express those queries?
[1] http://www.w3.org/TR/css3-mediaqueries
Cheers,
-h&kon
HÃ¥kon Wium Lie CTO Â°Ã¾eÂ®Âª
howcome@opera.com http://people.opera.com/howcome