CSS 媒体查询中纵横比和设备纵横比的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5725838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between aspect-ratio and device-aspect-ratio in CSS media queries
提问by poptag
What is the difference in simple terms between aspect-ratioand device-aspect-ratio?
aspect-ratio和之间的简单术语有什么区别device-aspect-ratio？
采纳答案by alex
aspect-ratio
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.
描述输出设备的目标显示区域的纵横比。该值由两个由斜杠 ("/") 字符分隔的正整数组成。这表示水平像素数超过垂直像素数。
来源。
device-aspect-ratio
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.
描述输出设备的纵横比。该值由两个由斜杠 ("/") 字符分隔的正整数组成。这表示水平像素数超过垂直像素数。
来源。
回答by F Lekschas
For everyone who is confused about the difference between targeted display areaand output deviceregarding 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-ratioand device-aspect-ratioare 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.
我希望它有帮助。
回答by Roger Krueger
A functional difference on mobile is that having the soft keyboard come up changes aspect-ratio but does not change device-aspect-ratio.
移动设备上的一个功能差异是软键盘的出现会改变纵横比，但不会改变设备纵横比。
回答by 1236
aspect-ratio measures viewport area. device-aspect-ratio measures device screen area.
纵横比测量视口区域。设备纵横比测量设备屏幕区域。
回答by zloctb
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.
视口纵横比或设备纵横比是宽度与高度的比率。所以，如果一个屏幕是 1,000 像素宽和 500 像素高，设备纵横比将是 2:1，因为 1,000 是 500 的两倍。屏幕的比例差异很大，尽管乍一看它们几乎都只是看起来像一个类似的矩形。
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.
常见的显示器纵横比为 16:9（如 1920 × 1080 或 1366 × 768 像素）或 16:10（1280 × 800）。iPhone 3 和 4S 是 3:2（480 × 320 和 960 × 640），iPhone 5 是 16:9（1136 × 640）。Android 手机通常为 4:3、3:2、16:10 或 16:9。
Examples:
例子：
@media only screen and (device-aspect-ratio: 16/9)
{ ... }
@media only screen and (min-device-aspect-ratio:
1920/1080) { ... }
