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

Posted 2023-03-06

【中文标题】Nexus 7 screen.width 返回 800 但媒体查询 max-width: 720px 仍然适用

【英文标题】：Nexus 7 screen.width returns 800 but media query max-width: 720px still applies

【发布时间】：2012-08-28 17:55:31

【问题描述】：

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

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

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

【问题讨论】：

对我来说是正确的 - 你有没有试过在 jsfiddle 上这样做，没有其他影响？它仍然适用吗？

这些可能会帮助你http://css-tricks.com/forums/discussion/17586/media-queries-with-identical-width/p1

【参考方案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。

【讨论】：

我对这里的命名非常困惑...在上面的response.js 站点中，它列出了viewport width、device width 和document width 的JavaScript 属性。在 css 中，device-width 媒体查询是否与 viewport width 等效？为什么它们不叫同一个东西？

对 target-densitydpi 的支持已从 Webkit 中删除，请参阅 trac.webkit.org/changeset/119527 和此处的说明：petelepage.com/blog/2013/02/…

@VolkerE.：Android 的新版本 (4.4+) 不再使用 Webkit。切换到 Google 的 Webkit 分支：Blink。 target-densitydpi 现在和将来仍然支持所有 Android 设备。旧版本的 Android（4.3 及更低版本）正在使用旧版本的 Webkit，target-densitydpi 仍然可用。