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

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