移动WEB viewport像素与设备像素同步问题

最近的项目很多都是移动端 WEB 开发。

The problem

有一个以往一直存在,但是缺乏关注的问题:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />

如上,以往一直用这个 wiewport,于是顺利成章,拿手机打开的时候,一个 css 像素对应两个设备像素,边界很宽很难看。

以前客户没要求,于是忽略了这个问题,现在客户需要我解决,于是我要找办法了。

首先我以为,“一个设备像素”应该是有一个 css3 的单位来对应的,unfortunately,没有。

然后,发现问题还是出在 viewport 上面,关键点在于,对于不同的设备,有一个“设备宽度”,有一个“viewport 宽度”。这两者一般已经预设了一个比例,在我的手机上,这个比例是2,也就是说,设备宽度是 720 像素,而实际的 css 宽度是 360 像素,因此在 css 中设置的 1px 边框会变成 2px 显示,难看。

百度求解,用如下的 viewport,使用 target-densitydpi 这个参数,这个参数默认为 medium-dpi,可能就让这个比例为 2,如果我们将其设置为 device-dpi,那么这两个像素比例就会同步。

<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,target-densitydpi=device-dpi" />

unfortunately, again

这个语法的支持被新版的 webkit 内核 deprecate 了。

density-dpi-deprecated

继续找,最终的解决方案在 stackoverflow 找到:

http://stackoverflow.com/questions/11592015/support-for-target-densitydpi-is-removed-from-webkit

使用这段代码,在 viewport 上面设置一个 id=”viewport”,然后加入 JQuery 代码:

var viewPortScale = 1 / window.devicePixelRatio;
$('#viewport').attr('content', 'user-scalable=no, initial-scale='+viewPortScale+', width=device-width');

原理就是,获取原始的像素比例,然后让 viewport 固定一个缩放比例,设置为像素比例的倒数,这样就把比例还原成 1:1 了。

由衷感叹,还是 stackoverflow 给力啊。


【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2014/12/web-viewport-pixel.html【移动WEB viewport像素与设备像素同步问题】

发表评论

电子邮件地址不会被公开。 必填项已用*标注