移动端 1px 问题的解决办法

移动端 1px 问题的解决办法

在 dpr=2（Retina 屏）或 dpr=3 的设备上，border: 1px solid 实际会占 2~3 个物理像素，看起来比设计稿"粗"一倍。推荐解决方法：媒体查询 + transform。

/* 2 倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}
/* 3 倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

补充：常见解决方案对比：

• 媒体查询 + transform：兼容性最好（iOS 8+、Android 4.4+），推荐。
• border-image：维护成本略高，需要切一张 1px 渐变图。
• box-shadow 模拟边框：box-shadow: 0 1px 1px -1px rgba(0,0,0,0.5)，不会触发回流，但点击事件需要额外处理。
• viewport 缩放：initial-scale: 1/dpr，会影响所有元素的尺寸，不推荐单独用于解决 1px。