device-aspect-ratio

{{deprecated_header}}

[!NOTE] To query for the {{glossary("aspect ratio")}} of the viewport, developers should use the aspect-ratio media feature instead.

The device-aspect-ratio CSS media feature can be used to test the width-to-height {{glossary("aspect ratio")}} of an output device.

Syntax

The device-aspect-ratio feature is specified as a {{cssxref("<ratio>")}}. It is a range feature, meaning that you can also use the prefixed min-device-aspect-ratio and max-device-aspect-ratio variants to query minimum and maximum values, respectively.

Examples

Using min-device-aspect-ratio

article {
  padding: 1rem;
}

@media screen and (min-device-aspect-ratio: 16/9) {
  article {
    padding: 1rem 5vw;
  }
}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}