问题
What is the difference in simple terms between aspect-ratio and device-aspect-ratio?
回答1:
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.
回答2:
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.
回答3:
A functional difference on mobile is that having the soft keyboard come up changes aspect-ratio but does not change device-aspect-ratio.
回答4:
aspect-ratio measures viewport area. device-aspect-ratio measures device screen area.
回答5:
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) { ... }
来源：https://stackoverflow.com/questions/5725838/difference-between-aspect-ratio-and-device-aspect-ratio-in-css-media-queries