对于我当前的移动网络项目,我使用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的设备尺寸为480×800,因此视口在纵向模式下的宽度应为480.但显而易见,Opera mobile 9.7(也许是9.5)设置了一个错误的宽度,所以之后,一切都放大了一点.我使用一个简短的JavaScript代码段来检查实际的窗口大小：
$(window).width() – >返回274
window.innerWidth – >返回480
当我硬编码480而不是“设备宽度”,一切正常.与景观模式相同：
$(window).width() – >返回457
window.innerWidth – >返回800
有没有解决办法？
问候
我有点晚了,但是
视口元标记必须被视为CSS像素,而不是屏幕的物理像素.
并且它们之间的比例对于器件的物理像素密度可能是非常不同的：
视口元标记必须被视为CSS像素,而不是屏幕的物理像素.
并且它们之间的比例对于器件的物理像素密度可能是非常不同的：
iPhone3：physical 320x480px / CSS 320x480px =>比= 1,容易.
iPhone4：物理640×960像素/ CSS 320x480px =>比例= 2,这就是苹果想要做的,当他们在iPhone4中使像素小两倍,以保持站点优化3在4上完全一样.
HTC Desire HD：physical 480x800px / CSS 320x533px => ratio = 1.5,这可能与HTC HD2的接近.
如果您为视口使用width = device-width值,我的猜测是您不应该在设计中有固定的宽度,但是更好地使用宽度(以％为单位),请注意,在大多数(最近)移动设备中,您的CSS总宽度将大约在320像素(纵向)或500像素(景观)的大小1.0.
