为啥android浏览器视口比手机的实际屏幕尺寸小很多，即使使用width=device-width？

Posted 2023-02-22

【中文标题】为啥android浏览器视口比手机的实际屏幕尺寸小很多，即使使用width=device-width？

【英文标题】：Why android browser viewport is much smaller than actual screen size of the mobile phone, even when using width=device-width?为什么android浏览器视口比手机的实际屏幕尺寸小很多，即使使用width=device-width？

【发布时间】：2012-02-12 08:58:08

【问题描述】：

我想问一下为什么我的 HTC Desire HD 的浏览器报告视口的宽度为 369 像素，即使屏幕的实际像素大小是 480x800 WVGA。

我在我的页面中使用了这个 CSS 样式：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />

您能否解释一下这种奇怪的行为以及如何强制 android 浏览器将视口的宽度实际设置为 480 像素而不是奇怪的 369 像素？

感谢您的帮助。

【参考方案1】：

该问题的详细解释可以在blog post找到。

您看到的数字 (369px) 实际上是设备大小乘以默认的假定屏幕密度 160 dpi。

为了使用设备屏幕密度，您必须在视口元数据中指定要使用设备的 dpi。

例如：

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">

编辑：WebView 类的文档现在还包含有关 target-densityDpi 参数和可能值的信息。

【讨论】：

感谢您对问题的出色回答和解释！

这已经解决了我大约 4 个小时都无法弄清楚的问题......非常感谢 :-)