移动端 Retina 屏幕 1px 边框问题

Question

造成粗边框的原因：由于 CSS 中使用的像素称为逻辑像素，我们手机设备屏幕中的像素称之为物理像素，1 逻辑像素不一定是 1 个物理像素，我们常说的 2倍屏、3倍屏就是物理像素与逻辑像素的比值，对于两倍屏 1 逻辑像素等于 2 个物理像素，三倍屏 1 个逻辑像素等于 3 个物理像素。

在移动端 Retina 屏幕上，1px 边框在显示上会模糊或呈现为 2px 的宽度。这是因为 Retina 屏幕具有高像素密度，导致 1 个 CSS 像素对应多个物理像素。

为了解决这个问题，可以采用以下两种方法之一：

1. 使用 CSS3 的 border-image 属性：可以通过使用 border-image 属性将一张 1px 宽度的边框图片应用到元素上，从而达到显示清晰的效果。这样做可以避免浏览器对边框进行缩放，保持边框的清晰度。
2. 使用 transform: scale() 属性：可以通过将元素进行缩放来解决边框模糊的问题。使用 transform: scale(0.5) 可以将元素的大小减小一半，并且边框也会相应减小，从而达到显示清晰的效果。

需要注意的是，使用 border-image 属性或 transform: scale() 属性可能会增加页面的渲染负担，因此在使用时需要考虑性能问题。另外，在使用 border-image 属性时，需要额外准备一张边框图片，并且要注意图片大小和比例的准确性。