对于我当前的移动 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，因此在纵向模式下视口的宽度应为 480。但显然 Opera mobile 9.7（也许还有 9.5）设置了错误的宽度，因此之后所有内容都会放大一点。我使用了一个简短的 JavaScript 片段来检查实际的窗口大小：
$(window).width() -> 返回 274
window.innerWidth -> 返回 480
当我硬编码 480 而不是“设备宽度”时，一切正常。横向模式也是如此：
$(window).width() -> 返回 457
window.innerWidth -> 返回 800
有什么解决方法吗？
问候
我有点晚了，但是：
视口元标记必须被视为 CSS 像素，而不是屏幕的物理像素。
就设备的物理像素密度而言，它们之间的比率可能有很大不同：
iPhone3：物理 320x480px / CSS 320x480px => 比例 = 1，简单。
iPhone4：物理 640x960px / CSS 320x480px => 比率 = 2，这就是苹果公司在 iPhone4 中将像素缩小两倍时的想法，以便使针对 3 进行优化的网站在 4 上运行完全相同。
HTC Desire HD：物理 480x800px / CSS 320x533px => 比率 = 1.5，这可能与您在 HTC HD2 上体验到的类似。
如果您对视口使用 width=device-width 值，我的猜测是您的设计中不应该有固定宽度，但最好使用百分比宽度，请记住，在大多数（最近的）移动设备中，您的 CSS比例为 1.0 时，总宽度约为 320 像素（纵向）或 500 像素（横向）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
