Html Nexus 7 screen.width 返回 800 但媒体查询 max-width: 720px 仍然适用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12257279/
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
Nexus 7 screen.width returns 800 but media query max-width: 720px still applies
提问by Jake Wilson
I have a Google Nexus 7 tablet I'm using for testing some responsive designs. In Javascript, the screen.widthreturns as 800px, as expected (the native resolution).
我有一台 Google Nexus 7 平板电脑，用于测试一些响应式设计。在 Javascript 中，screen.width按预期返回 800px（原始分辨率）。
How come the following media query is picked up by the tablet when the max width of the screen is > 720px?
当屏幕的最大宽度 > 720px 时，平板电脑如何选择以下媒体查询？
@media only screen and (max-width: 720px) and (orientation: portrait) {
.test{ background: red;}
}
回答by Andrew Moore
Android does target density scaling in order to accommodate the varying screen densities of the Android ecosystem. The Android browser targets a medium screen density by default, trying to emulate the size of elements as if the screen was an MDPI screen.
Android 确实以密度缩放为目标，以适应 Android 生态系统的不同屏幕密度。默认情况下，Android 浏览器以中等屏幕密度为目标，尝试模拟元素的大小，就像屏幕是 MDPI 屏幕一样。
Using this website, you can see that the result of this scaling is that device-widthis 601 pxand device-heightis 880 pxon the Nexus 7. Therefore, it falls within your max-width: 720pxdeclaration and the background appears red.
使用这个网站，你可以看到，这个比例的结果是，device-width是601 px和device-height是880 px对的Nexus 7。因此，它属于你的内max-width: 720px声明和背景显示为红色。
window.screen.widthand .heightalways returns the actual screen size. You have to remember that the Viewport Sizeand the Screen Sizeare two different things altogether.
window.screen.width并.height始终返回实际屏幕尺寸。您必须记住，视口大小和屏幕大小完全是两个不同的东西。
If you do not want this behavior, you may add target-densitydpi=device-dpito your <meta name="viewport">tag. This will disable the Android target density scaling: device-widthand device-heightwill report the native screen resolution of the device.
如果您不想要这种行为，您可以添加target-densitydpi=device-dpi到您的<meta name="viewport">标签中。这将禁用Android的目标密度缩放：device-width和device-height将报告设备的原始屏幕分辨率。
More information about Android's target density scaling is available in the Android Developers' Documentation.
有关 Android 目标密度缩放的更多信息，请参阅Android 开发人员文档。
