高清屏下的1px边框问题

基本概念

像素(css pixels)

css像素或逻辑像素，单位是px，它是一个相对单位，在不同dpr(devicePixelRatio 设备像素比)设备中，1px代表的物理像素是不同的。

物理像素(device pxels)

显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

css像素和物理像素的关系

dpr = 物理像素 / css像素

iPhone X的dpr和横向css像素

而iPhone X横向分辨率刚好是1125

1px问题

普通屏幕的1px就是物理像素的1px，而Retina屏的1px就不等于1px了，这就造成了在不同设备中1px的实际宽度不一致的问题。

为了提高用户体验，需要兼容不同dpr设备，使1px边框真正显示为1个物理像素的宽度（大多情况下我们还是希望1px边框是尽可能细）。

解决方法

0.5px

具体写法如下

缺点：
retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和 之前版本，OS X Mavericks 及以前版本，还有 Android 设备。

伪元素 + transform

优点：浏览器兼容性非常好 👍

下面看一下在iPhone XS Max（dpr=3）上的实测效果

完美解决高清屏1px问题 👏

参考资料

https://objcer.com/2017/06/19...
https://github.com/jawil/blog...