html - Nexus 7 screen.width 返回 800 但媒体查询最大宽度 : 720px still applies

Question

我有一台 Google 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 屏幕一样。

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

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

如果你不想要这种行为，你可以添加 target-densitydpi=device-dpi给你的<meta name="viewport">标签。这将禁用 Android 目标密度缩放:device-width和 device-height将报告设备的 native 屏幕分辨率。

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