Retina
要解决这个问题,我们就要先了解Retina到底是什么?
所谓“Retina”是一种显示技术,可以把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。
在超高清屏(dpr=3)的情况下会用3dp的大小去渲染1px的内容, 因此1px的边框在超高清手机上会被拉伸成3px。所以才会导致我们在某些手机上看到的1px不是真实的1px。
接下来我们可以用下面这个方法来解决这个问题。
-
对于水平方向的border,可以这样设置
.weui-grids:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; border-top: 1px solid red; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .weui-grids:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; border-bottom: 1px solid red; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); transform-origin: 100% 100%; }
-
对于竖直方向的border,可以这样设置
.weui-grid:before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; border-right: 1px solid #D9D9D9; -webkit-transform: scaleX(.5); transform: scaleX(.5); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .weui-grid:after { content: ""; position: absolute; right: 0; left: 0; bottom: 0; height: 1px; border-bottom: 1px solid #D9D9D9; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; }
当然这是解决办法之一啦,更多解决方法可参考https://www.cnblogs.com/surfa...