的Nexus 7 screen.width返回800，但媒体查询最大宽度：720像素仍然适用(Nex

我有我使用了一些测试响应设计一个谷歌Nexus 7平板电脑。 在JavaScript中， screen.width返回为800像素，符合市场预期（原始分辨率）。

怎么就下列媒体查询被拾取的平板电脑时，屏幕的最大宽度为> 720像素？

@media only screen and (max-width: 720px) and (orientation: portrait) {
    .test{ background: red;}
}

Answer 1:

Android为目标密度缩放以适应Android生态系统的屏幕密度不同。 Android浏览器的目标默认情况下，中等屏幕密度，试图仿效元素的大小如果屏幕是一个MDPI屏幕。

使用这个网站 ，你可以看到，这个比例的结果是device-width为601 px和device-height为880 px的的Nexus 7。因此，它属于你的内max-width: 720px声明和背景显示为红色。

window.screen.width和.height总是返回的实际屏幕尺寸。 你要记住， 视口大小和屏幕大小是两个不同的东西完全。

如果你不希望这种行为，您可以添加target-densitydpi=device-dpi您<meta name="viewport">标签。 这将禁用的Android目标密度换算： device-width和device-height将报告设备的本地屏幕分辨率。

关于Android的目标密度缩放的更多信息，在可用的Android开发者文档 。

文章来源: Nexus 7 screen.width returns 800 but media query max-width: 720px still applies