This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



The media feature describes the actual aspect ratio of the output device, such as the aspect ratio of an entire screen or the aspect ratio of a page sheet.


device-aspect-ratio: <ratio>



Value for the aspect ratio of a device’s rendering surface must be a ratio value.


The example describes all screen devices with a screen aspect ratio of 16:9 or smaller and therefore all widescreens that are 16:9 or wider. Note: The flexible aspect ratio of the browser or any other rendering surface does not matter in this case. Therefore you would have to use mediaqueries: aspec-ratio.

@media screen and ( max-device-aspect-ratio: 16/9 ) { … }

Related specifications

Media Queries Level 4
Working Draft
Media Queries