Nexus 7 screen.width返回800，但媒体查询max-width：720px仍然适用

Question

我有一台谷歌Nexus 7平板电脑用于测试一些响应式设计。 在Javascript中， screen.width返回800px，如预期的那样（原始分辨率）。

当屏幕的最大宽度> 720px时，平板电脑如何选择以下媒体查询？

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

Answer 1

Android确实针对密度扩展，以适应Android生态系统不同的屏幕密度。 默认情况下，Android浏览器以中等屏幕密度为目标，尝试模拟元素的大小，就像屏幕是MDPI屏幕一样。

使用此网站 ，您可以看到此缩放的结果是Nexus 7上的device-width为601 px ， device-height为880 px 。因此，它属于您的max-width: 720px声明，背景显示为红色。

window.screen.width和.height始终返回实际的屏幕大小。 你必须记住， 视口大小和屏幕大小完全是两个不同的东西。

如果您不想要此行为，可以将target-densitydpi=device-dpi到<meta name="viewport">标记。 这将禁用Android目标密度缩放： device-width和device-height将报告device-height本机屏幕分辨率。

有关Android目标密度扩展的更多信息，请参阅Android开发人员文档 。