aspect-ratio

Jump to: navigation, search

aspect-ratio

This article is In Progress.



Summary

The media feature describes the aspect ratio of the output device's rendering surface, such as the viewport aspect ratio or the aspect ratio of the page box.


Syntax

  1. aspect-ratio: <ratio>
  2. min-aspect-ratio: <ratio>
  3. max-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 following example describes a viewport with a minimum aspect ratio of 1. This describes all viewports, which are quadratic or have a landscape ratio. Note: The aspect ratio of the viewport must not be the same as the aspect ratio of the screen. If you want to describe the aspect ratio of the screen, you have to use device-aspect-ratio.

@media screen and (min-aspect-ratio: 1/1) { ... }