移动开发中边框1px的问题

在实际移动端开发的过程中，有可能会遇到在安卓和IOS端的1px的边框宽度不一致，在高清屏下，移动端的1px 会很粗.

原因：不同的移动设备有不同的像素密度，而1px在不同的移动设备上都等于这个移动设备的1px.

解决方案：

1.伪元素+transform缩放

原理：通过伪元素创建边框，缩放至物理1px

.border-1px {position: relative;border: none; /* 移除原生边框 */
}
.border-1px::after {content: '';position: absolute;top: 0;left: 0;width: 200%;  /* 2倍尺寸 */height: 200%;border: 1px solid #333; /* 逻辑 1px */transform: scale(0.5);  /* 缩至 50% */transform-origin: 0 0;pointer-events: none;   /* 避免阻挡点击 */
}

适配多DPR:

/* DPR=2 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {.border-1px::after {transform: scale(0.5);}
}
/* DPR=3 */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {.border-1px::after {transform: scale(0.333);}
}

适用场景：单边/多边框、圆角边框（需同步缩放border-radius）

优点：灵活控制、兼容性好；

缺点：代码量较多，需注意伪元素层级；

2.动态viewport缩放（全局方案）

原理：通过JS动态调整视口缩放比例，使CSS像素与物理像素1：1对应。

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script>const dpr = window.devicePixelRatio || 1;const scale = 1 / dpr;const meta = document.getElementById('viewport');meta.content = `width=device-width, initial-scale=${scale}, maximum-scale=${scale}`;
</script>

适配CSS：需搭配rem或vw单位布局（如设置根字体为document.documentElement.style.fontSize = 100/(750/10)*dpr+'px')

优点：一劳永逸

缺点：需重新布局单位，可能影响第三方组件

3.使用图片边框

  border: 1px solid transparent;border-image: url('./../../image/96.jpg') 2 repeat;

缺点：改版时颜色变了，需要重新换图片

4.box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果

.box-shadow-1px {box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}