移动端1px的适配问题

先看个概念:

window.devicePixelRatio = 物理像素 / dips(独立像素)

window.devicePixelRatio是设备的物理像素和独立像素的比例,可以叫设备像素比。

非视网膜屏幕的iphone上设备像素比是1,而retina屏幕的iphone,一般像素比是2或者3。

大部分的浏览器目前还在运行在设备像素比是1的系统上,当移动到retina类似设备上时候,就会遇到问题。

css pixels:是可以被硬件和软件调节的单位。一般浏览器的设备像素比是1,所以一个css像素就是代表一个物理像素,

1个像素比=物理像素/1pix,移动端的iphone普遍是retina屏幕,设备像素比是2或者3,那么1 pix对应的应该是2或者3个物理像素。

css中设置:width:1px,对应的物理像素是2px,就会显示变粗,手机机型不同,设备像素比不同,显示的物理像素就不同。

iphone5为例子:iphone5的css像素:320px*568px,dpr设备像素比是2,物理像素就是:(320*2px)*(568px*2),即是640px*1136px。

2 = 640px/320px

2 = 1136px/568px

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<!--width=device-width:宽度为设备宽度-->
<!--initial-scale:缩放比为1-->
<!--user-scalable=no:是否允许用户自定义缩放-->

所以,移动端的1px的适配问题,还是出自retina屏幕的设备像素比不等于1,而是2或者3。导致css的1px显示出来是2px或者3px变粗。那么针对设备像素比不等于1的设备单独进行px的设置是可行的。但是如果1px,写成.5px在IOS7及其以下或者安卓系统都显示0px。这种方法不可行。

建议的方案:

1,viewport结合rem解决像素比:

比如在像素比为2中设置meta标签:

scale = 1/devicePixelRatio,可以把数字换成变量scale,淘宝的移动端适配flexible.js就是这样子的原理。

<meta name="viewport" content="inital-scale=0.5,maxium-scale=0.5,minimum-scale=0.5,user-scalable=no">

在devicePixelRatio=3中设置meta里面的系数为0.3333333333,

2,transform和伪类:before :after

如果是border:1px,可以利用:before或者:after重新写border,并使用transform的scale缩小一半。transform:scaleY(50%)

结合js代码来判断是否是retina屏幕:

if(window.devicePixelRatio && devicePixelRatio >= 2){
  //给div重新绑定样式
}

总结:移动端的1px变粗是因为retina屏幕的设备像素比不为1,导致实际显示可能是2px或者3px,可以改变meta标签里的scale系数,scale = 1/devicePixelRatio。一般是0.5或者0.333333,或者使用:before和:after结合transform的scale属性进行缩放。

【完】

 

posted @ 2018-11-13 11:33  tangjiao_Miya  阅读(959)  评论(0编辑  收藏  举报