Media query tests - device-aspect-ratio

Back to index.

CSS3 spec | CSS4 spec

The device-aspect-ratio media query uses the ratio of the width and height of the device. This is static on desktop, but dynamic on mobile and tablets, where you can change the orientation and thus the aspect ratio.

Generic WebKit bug: the media query is static; i.e. it doesn’t update when you change device orientation (and the ratio goes from, say, 9/16 to 16/9). Bug occurs in ALL mobile WebKits I tested so far, except the BlackBerry PlayBook.



The device-aspect-ratio should be the same as the ratio between screen.width and screen.height.

Note that this test should misfire when you change the orientation of the device. (It doesn’t in most WebKit-based browsers, but that’s a bug.) Reload the page if you change the orientation