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

Question

我有一台 Google Nexus 7 平板电脑，用于测试一些响应式设计。在 Javascript 中，screen.width 按预期返回 800 像素（本机分辨率）。

当屏幕的最大宽度> 720px时，平板电脑为什么会拾取以下媒体查询？

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

Answer 1

Android 确实以密度缩放为目标，以适应 Android 生态系统不断变化的屏幕密度。默认情况下，Android 浏览器以中等屏幕密度为目标，试图模拟元素的大小，就好像屏幕是 MDPI 屏幕一样。

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

window.screen.width 和 .height 总是返回实际的屏幕尺寸。您必须记住，Viewport Size 和 Screen Size 完全是两个不同的东西。

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

有关 Android 目标密度缩放的更多信息，请参阅Android Developers' Documentation。