Difference between aspect-ratio and device-aspect-ratio in CSS media queries

Question

What is the difference in simple terms between aspect-ratio and device-aspect-ratio?

Answer 1

A functional difference on mobile is that having the soft keyboard come up changes aspect-ratio but does not change device-aspect-ratio.

Answer 2

ASPECT RATIO

The viewport aspect ratio or device aspect ratio is the ratio of the width to the height. So, if a screen were 1,000 pixels wide and 500 pixels high, the device-aspect-ratio would be 2:1, because 1,000 is twice 500. The ratios of screens vary widely, even though at first glance they pretty much all just look like a similar rectangle.

Common monitor aspect ratios are 16:9 (such as 1920 × 1080 or 1366 × 768 pixels) or 16:10 (1280 × 800). The iPhone 3 and 4S are 3:2 (480 × 320 and 960 × 640) and the iPhone 5 is 16:9 (1136 × 640). Android phones are commonly 4:3, 3:2, 16:10, or 16:9.

Examples:

@media only screen and (device-aspect-ratio: 16/9)
{ ... }
@media only screen and (min-device-aspect-ratio:
1920/1080) { ... }

Answer 3

aspect-ratio

Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the number of horizontal pixels over the number of vertical pixels.

Source.

device-aspect-ratio

Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the number of horizontal pixels over the number of vertical pixels.

Source.

Answer 4

aspect-ratio measures viewport area. device-aspect-ratio measures device screen area.

Answer 5

For everyone who is confused about the difference between targeted display area and output device regarding the aspect-ratio:

targeted display area

Aspect ratio of your browser window or the area your website is displayed on (a special case would for example be an embedded website)

output device

Physical aspect ratio of the screen. E.g. of your smartphone or desktop display

As smartphones and tablets usually display apps in fullscreen mode only, aspect-ratio and device-aspect-ratio are the same. On a desktop computer this surely is not always the case as the user can resize the browser window and thus the aspect-ratio changes.

I hope it helps.