Note: To query for the 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 aspect ratio of an output device.
Syntax
The device-aspect-ratio feature is specified as a <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;
}
}