device-aspect-ratio

Jump to: navigation, search

device-aspect-ratio

This article is In Progress.

W3C Recommendation

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.

CSS

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



Related specifications

Specification Status Related Changes
Media Queries Level 4 Working Draft
Media Queries Recommendation