windows-mobile - 元 "viewport"设备宽度 : Wrong width small on Opera Mobile 9. 7(10 个作品)

Question

对于我当前的移动 Web 项目，我使用元“视口(viewport)”标签来指示移动浏览器使用 1:1 的比例与设备的宽度:

<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这适用于 IE mobile、iPhone Safari 甚至 Opera 10 beta，但不适用于 Opera 9.7，它默认安装在 HTC HD2 上。 HTC HD2 的设备尺寸为 480x800，因此在纵向模式下视口(viewport)的宽度应为 480。但显然 Opera mobile 9.7(也许还有 9.5)设置了错误的宽度，所以之后一切都被放大了一点。我使用了一个简短的 javascript 片段来检查实际的窗口大小:

$(window).width() -> 返回 274
window.innerWidth -> 返回 480

当我硬编码 480 而不是“设备宽度”时，一切正常。横向模式也一样:

$(window).width() -> 返回 457
window.innerWidth -> 返回 800

有什么解决方法吗？

问候

Answer 1

我对此有点晚了，但是:
视口(viewport)元标记必须被视为 CSS 像素，而不是屏幕的物理像素。
并且它们之间的比率在设备的物理像素密度方面可能有很大不同:

iPhone3:物理 320x480px/CSS 320x480px => ratio = 1，简单。

iPhone4:物理 640x960px/CSS 320x480px => ratio = 2，这就是 Apple 在 iPhone4 中将像素缩小两倍以保持针对 3 优化的网站在 4 上完全相同时所考虑的做法。

HTC Desire HD:物理 480x800px/CSS 320x533px => ratio = 1.5，这可能与您使用 HTC HD2 的体验相近。

如果您对视口(viewport)使用 width=device-width 值，我的猜测是您不应该在设计中使用固定宽度，但最好使用 % 的宽度，请记住，在大多数(最近的)移动设备中，您的 CSS总宽度约为 320 像素(纵向)或 500 像素(横向)，比例为 1.0。