14

对于我当前的移动 Web 项目，我使用元“视口”标签来指示移动浏览器使用 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

有什么解决方法吗？

问候

4

5 回答 5

9

我对此有点晚了，但是：视口元标记必须被视为 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 的体验相近。

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

于 2010-12-22T22:42:06.940 回答
3

我知道这是一个老问题，但它可能对某人有所帮助。在本文中，有一节介绍了 Opera Mobile 9.7 中对视口元标记的支持： http ://dev.opera.com/articles/view/opera-mobile-9-7-features-standards/ 属性 user-scalable , minimum-scale 和 maximum-scale 不受支持，但应支持宽度、高度和初始比例。如果效果不佳，您可以随时尝试使用 CSS 媒体查询。同一篇文章中有描述和示例。

于 2010-09-17T15:00:20.493 回答
2

看看：http ://www.quirksmode.org/mobile/viewports2.html 进入一个痛苦的世界:)

于 2011-03-14T12:45:59.243 回答
0

您是否尝试过 HandleFriendly 标签？

适用于 BB 并表明您已经为小屏幕设计了代码

于 2010-08-16T09:50:58.443 回答
0

Have a look at PPK's Quirksmode.org mobile site. Heaps of info, plus compatibility tables!

于 2010-09-16T23:32:30.140 回答