前言
在我们实际移动端开发的过程中，有可能会遇到在安卓和IOS端的1px的边框宽度不一致，在高清屏下，移动端的1px 会很粗。对于要求比较高的公司来说这是个必须解决的问题。
产生原因
在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。然而1px在不同的移动设备上都等于这个移动设备的1px，这是因为不同的移动设备有不同的像素密度。有关这个属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是
devicePixelRatio = 物理像素 / 独立像素
在html的头部有这样一行代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- 这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放.
- 不同的手机都有一个完美适配的viewport。以实际举例: iphone3和iphone4的屏幕宽度分别是320px,640px, 但是它们的ideal viewport的宽度都是320px, 设置了设备宽度后, 320px宽的元素都能100%的填充满屏幕宽. 不同手机的ideal viewport宽度是不一样的, 控制viewport的好处就在于一套css可以适配多个机型.
- viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长.
解决方案
方案一： 伪类+transform实现
实现原理：把原先元素的 border 去掉，然后利用伪类 :before 或 :after 重写 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
- 单个边框
.scale{
position: relative;
border:none;
}
.scale:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
···
+ 四个边框
```.scale{
position: relative;
margin-bottom: 20px;
border:none;
}
.scale:after{
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
方案二：使用边框图片
border: 1px solid transparent;
border-image: url('./../../image/96.jpg') 2 repeat;
缺点：改版时颜色变了，需要重新换图片。
方案三：使用 flexible.js
这是淘宝移动端采取的方案, flexible.js的github的地址. 前面已经说过1px变粗的原因就在于一刀切的设置viewport宽度, 如果能把viewport宽度设置为实际的设备物理宽度, css里的1px不就等于实际1px长了么. flexible.js就是这样做的。
里面的scale值指的是对ideal viewport的缩放, flexible.js检测到IOS机型, 会算出scale = 1/devicePixelRatio, 然后设置viewport
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
方案四：使用box-shadow模拟边框
利用css 对阴影处理的方式实现0.5px的效果
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
文章参考链接： 关于移动端开发1px边框的一些理解及解决办法
网友评论