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.

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



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 ? ? ? ? ? ? ? ?