meta"viewport"device-width:Opera Mobile 9.7上的宽度小错误(10个作品)

Question

对于我当前的移动Web项目,我使用meta"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移动设备,iPhone Safari甚至Opera 10测试版,但它不适用于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

这有什么解决方法吗？

问候

Answer 1

我有点晚了但是:视口元标记必须被视为CSS像素,而不是屏幕的物理像素.它们之间的比例可能与设备的物理像素密度有很大差异:

iPhone3:物理320x480px/CSS 320x480px =>比率= 1,简单.

iPhone4:物理640x960px/CSS 320x480px => ratio = 2,这就是Apple在iPhone4中将像素缩小两倍时所想做的事情,以便保持3个优化的网站在4上完全相同.

HTC Desire HD:物理480x800px/CSS 320x533px =>比率= 1.5,这可能与您使用HTC HD2时的情况相近.

如果你使用视口的width = device-width值,我的猜测你不应该在设计中有一个固定的宽度,但更好地使用%的宽度,记住在大多数(最近的)移动设备中你的CSS总宽度约为320像素(纵向)或500像素(横向),比例为1.0.

Answer 2

您尝试过 HandleFriendly 标签吗？

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