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

最新推荐文章于 2024-07-12 18:48:27 发布

开心大表哥

最新推荐文章于 2024-07-12 18:48:27 发布

阅读量5.3k

点赞数 9

分类专栏： css3 基础加固

本文链接：https://blog.csdn.net/a419419/article/details/80217328

版权

基础加固同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

css3

25 篇文章 3 订阅

订阅专栏

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

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

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

这句话定义了本页面的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. 前面已经说过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 绝对定位。
来看一个控制各条边的常用实例：
这里写图片描述
我们可以很明显地看到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就可以了！

开心大表哥

关注

9
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
移动端1px误差的原因以及解决方案

移动端1px问题在面试和工作中会经常遇到，系统地理解它是一个优秀前端的必修课！为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum...
复制链接

扫一扫

专栏目录