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

Question

我感到困惑。我试图通过使用媒体查询来使网站具有响应性。

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

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

为什么会这样？我真的想弄清楚这个问题，当然，当使用980时，它可以正常工作，但我想知道发生了什么，为什么？我的意思是，我的手机不应该是980像素宽或高，这是某种像素密度问题吗？

- Millenjo

---

你正在测试哪个手机型号和Android版本？ - Paul D. Waite

HTC Desire HD 运行着 2.3.5。 - Millenjo

但我认为这个问题也存在于 iPhone 4 上，不确定操作系统版本。 - Millenjo

@Milenjo：很酷。根据维基百科，HTC Desire HD 拥有 480x800 像素的屏幕。因此它应该与 max-device-width: 480px 匹配，除非我漏掉了什么（这是很有可能的）。 - Paul D. Waite

没错，那就是问题所在，为什么当我将它设置为980时它会有反应。相信我，我已经查过维基百科和其他各种资料了。 - Millenjo

Answer 1

我知道这个问题有点老，但对于未来查看此问题的人而言，最可能是由于原帖作者没有设置正确的meta标签导致的。请将以下内容添加到头部。

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

- Tyler McGinnis

---

不是这样的，无论您是否添加视口元标记，问题都存在。这与max-width和max-device-width之间的差异有关。 - dramzy

已经为我修复了！ :D - Michael Seltenreich

在花了半天的时间来弄清楚为什么媒体查询不起作用后，这个修复方法解决了问题！ - Arpan Jain

Answer 2

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

以下是一个测试页面：

• http://jsfiddle.net/56XhE/

为了真正掌握此技术，您需要阅读Peter-Paul Koch的“两个视窗的故事”：

• http://www.quirksmode.org/mobile/viewports.html
• http://www.quirksmode.org/mobile/viewports2.html

可能还要阅读他针对移动设备制作CSS的建议：

• http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

- Paul D. Waite

---

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 对我解决了问题，感谢那些有用的链接，我会仔细阅读它们！ - Millenjo

@Millenjo：太好了。是的，那个<meta>标签是我在编写移动CSS时保持理智的唯一方法（尽管我只使用<meta name="viewport" content="width=device-width">，因为我认为maximum-scale=1会禁用用户缩放，这不是我想要的默认行为）。非常感谢你，这是一个令人困惑的领域：我花了很长时间才弄明白。需要记住的关键是设备像素（即设备屏幕上的一个物理像素）不一定匹配一个CSS像素。 - Paul D. Waite

Answer 3

请参考以下网址了解有关设备宽度的信息：

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

- web2008

---

那并没有特别有帮助，980这个值根本没有提到。而且这基本上是我链接到的相同值。 - Millenjo

实际上，您链接中的下一页似乎描述了我的问题。 - Millenjo