device-aspect-ratio

Summary

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.

Syntax

device-aspect-ratio: <ratio>

Values

ratio

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

Examples

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

Recommendation