高清屏下的1px边框问题

5

基本概念

像素(css pixels)

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

物理像素(device pxels)

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

css像素和物理像素的关系

dpr = 物理像素 / css像素

iPhone X的dpr和横向css像素

clipboard.png

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

1px问题

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

clipboard.png

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

解决方法

0.5px

clipboard.png

具体写法如下

图片描述

缺点:
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...

你可能感兴趣的

Nobody · 2018年11月10日

这种方式还行

回复

载入中...