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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
21
Yes
?
Unknown
9.0
Yes
9
Yes
4
Yes
grid
?
Unknown
?
none
?
Unknown
?
Unknown
?
Unknown
resolution
29
Yes
?
Unknown
?
Unknown
?
Unknown
?
Unknown
scan
?
Unknown
?
none
?
Unknown
?
Unknown
?
Unknown

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Yes
?
Yes
?
Unknown
?
Yes
?
Yes

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