移动端1px误差的原因以及解决方案

一时失言乱红尘 2022-05-25 02:30 561阅读 0赞

移动端1px问题在面试和工作中会经常遇到，系统地理解它是一个优秀前端的必修课！

为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句

这句话定义了本页面的**viewport**的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放。  
手机存在一个能完美适配的理想viewport, 分辨率相差很大的手机的理想viewport的宽度可能是一样的, 这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的, **viewport的好处就在于一套css可以适配多个机型**。

在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。然而1px在不同的移动设备上都等于这个移动设备的1px，这是因为不同的移动设备有不同的像素密度。有关这个属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是

devicePixelRatio = 物理像素 / 独立像素

1px变粗的原因： viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。

**解决方案**  
1.rem解决：

根据屏幕大小及dpi调整缩放和大小  
    (function () {
            var scale = 1.0;
            var ratio = 1;
            if (window.devicePixelRatio >= 2) {
                scale *= 0.5;
                ratio *= 2;
            }
            var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />
    ';
            document.write(text);
            document.documentElement.style.fontSize = 50 * ratio + "px";
        })();

2.flexible.js  
这是淘宝移动端采取的方案, github的地址:[https://github.com/amfe/lib-flexible][https_github.com_amfe_lib-flexible]. 前面已经说过1px变粗的原因就在于一刀切的设置viewport宽度, 如果能把viewport宽度设置为实际的设备物理宽度, css里的1px不就等于实际1px长了么. flexible.js就是这样干的。

`<meta name=”viewport”>`里面的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');

3.伪类+transform实现  
对于解决1px边框问题，我个人觉得最完美的解决办法还是伪类+transform比较好。  
原理：是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。  
来看一个控制各条边的常用实例：  
![这里写图片描述][70]  
我们可以很明显地看到normal的1px边框明显比其他的都粗，下面的做法主要是利用伪元素将原本的1px缩小成0.5px。

<html>
    	<body>
    	<div class="btn normal">normal</div>
    	<div class="btn all">all</div>
    	<div class="btn top">top</div>
    	<div class="btn bottom">bottom</div>
    	<div class="btn left">left</div>
    	<div class="btn right">right</div>
    	<style>
    		body{
    			text-align: center;
    		}
    		.normal{
    			border: 1px solid #DDDDDD;
    		}
    		.btn{
    			width: 70px;
    			height: 30px;
    			margin-top: 10px;
    			position: relative;
    			margin-left: 100px;
    		}
    		.all::after{
              content: '';
              position: absolute;
              pointer-events: none; /* 元素永远不会成为鼠标事件的target。 */
              top: -50%;
              bottom: -50%;
              left: -50%;
              right: -50%;
              -webkit-transform: scale(0.5);
              transform: scale(0.5);
              border: 1px solid #DDDDDD;
            }
    		.top:after{
    			content: '';
    			position: absolute;
    			top: 0;
    			left: 0;
    			right: 0;
    			-webkit-transform: scale(1, 0.5);
    			transform: scale(1, 0.5);
    			border-top: 1px solid #DDDDDD;
    		}
    		.bottom:after{
    			content: '';
    			position: absolute;
    			bottom: 0;
    			left: 0;
    			right: 0;
    			-webkit-transform: scale(1, 0.5);
    			transform: scale(1, 0.5);
    			border-bottom: 1px solid #DDDDDD;;
    		}
    		.left:after{
    		  content: '';
    		  display: block;
    		  position: absolute;
    		  top: 0;
    		  bottom: 0;
    		  left: 0;
    		  -webkit-transform: scale(0.5, 1);
    		  transform: scale(0.5, 1);
    		  border-left: 1px solid #DDDDDD;
    		}
    		.right:after{
              content: '';
              display: block;
              position: absolute;
              top: 0;
              bottom: 0;
              right: 0;
              -webkit-transform: scale(0.5, 1);
              transform: scale(0.5, 1);
              border-right: 1px solid #DDDDDD;
    		}
    	</style>
    	</body>
    </html>

由于所有的边都列出来了，所以就不一一说明了，复制到项目里面就可以用了！  
不过对于input、texteara这类不能插入伪元素dom应该如何处理呢？  
方案：  
将伪元素换成一个div，然后通过position：absolute将这个div与input的位置重合，将input的border设为0就可以了！

[https_github.com_amfe_lib-flexible]: https://github.com/amfe/lib-flexible
[70]: /images/20220525/042c40406d36488ab90e004a8448e7ba.png