device-aspect-ratio

Jump to: navigation, search

device-aspect-ratio

This article is In Progress.



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 ) { … }



Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?