windows-mobile – meta“viewport”device-width：Opera Mobile

发布时间：2020-12-13 20:11:18 所属栏目：Windows 来源：网络整理

导读：对于我当前的移动网络项目,我使用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" /

对于我当前的移动网络项目,我使用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像素,而不是屏幕的物理像素.
并且它们之间的比例对于器件的物理像素密度可能是非常不同的：

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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!