为什么我的 Android 设备宽度为 980 像素？答案

【问题标题】：Why is my Android device-width 980px?为什么我的 Android 设备宽度为 980 像素？
【发布时间】：2013-03-30 09:48:44
【问题描述】：

我很困惑。我正在尝试通过播放媒体查询来使网站具有响应性。

根据大多数来源，例如 this，用于智能手机的 mediq 查询是 max-device-width: 480px 和 min-device-width: 320px。

但是当我使用这些查询时，我的 android 2.x 仍然显示页面的“计算机版本”。所以我开始更改查询中的值并注意到我的手机似乎有 980px 的设备宽度..

这是为什么呢？我真的很想掌握这一点，当然我很高兴在使用 980 时它可以正常工作，但我想知道发生了什么以及为什么？我的意思是我的手机不应该是 980px 宽或高，这是某种像素密度问题吗？

【问题讨论】：

您正在测试什么手机型号和 Android 版本？
HTC 渴望高清运行 2.3.5
但我认为这个问题也存在于 iphone 4 上，不确定操作系统版本。
@Milenjo：很酷。 According to Wikipedia，HTC Desire HD 有一个 480x800 像素的屏幕。所以它应该匹配max-device-width: 480px，除非我遗漏了什么（这很有可能）。
是的，没错，这就是问题所在，为什么当我将其设置为 980 时它会做出反应。相信我，我还检查了维基百科和其他各种来源。

【解决方案1】：

我知道这个问题很老，但对于未来的人来说，这很可能是因为 OP 没有设置正确的元标记。将此添加到标题中。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

【讨论】：

【解决方案2】：

您可能想尝试使用max-width 而不是max-device-width。这很可能是像素密度的问题 - max-device-width 可能报告的是设备像素而不是 CSS 像素。

这是一个测试页面：

要真正了解这一点，您需要阅读 Peter-Paul Koch 的“两个视口的故事”：

可能还有他对为移动设备做 CSS 的建议：

【讨论】：

为我解决了这个问题，感谢您提供这些有用的链接，将他们犁过！
@Millenjo：太好了。是的，<meta> 标签是我在编写移动 CSS 时保持理智的唯一方法（尽管我只使用<meta name="viewport" content="width=device-width">，因为我认为maximum-scale=1 禁用了用户缩放，默认情况下我不想这样做）。不客气，这是一个令人困惑的领域：我花了很长时间才弄清楚它。要记住的关键是设备像素（即设备屏幕上的一个物理像素）不一定匹配一个 CSS 像素。

【解决方案3】：

【讨论】：