移动端1px边框显粗是因视网膜屏下css 1px映射为多物理像素并经抗锯齿渲染；需用伪元素+200%宽高+scale(1/dpr)+transform-origin:0 0实现精准1px，但需js动态适配dpr，并注意safari兼容性及性能问题。
为什么移动端1px边框看起来比设计稿粗
视网膜屏（dpr > 1）下，CSS里的1px被映射到多个物理像素，浏览器默认会做“抗锯齿渲染”，导致视觉上发虚、偏粗。设计师给的1px是逻辑像素，而设备实际画了2px或3px——transform: scale(0.5)本质是把一个2px高的元素缩放到1px高，骗过渲染层。
用scale(0.5)实现真正1px边框的关键写法
不能直接对元素本身缩放，否则内容也会变小；必须用伪元素单独绘制边框，并精确控制坐标和尺寸：
.border-1px {
position: relative;
}
.border-1px::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid #ccc;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
}
-
width/height设为200%：确保缩放后边框能铺满父容器（因scale(0.5)会让原始1px边框只占0.5px，需先放大再缩回） -
transform-origin: 0 0必须显式声明：否则缩放中心默认在元素中点，边框会错位 -
pointer-events: none防止伪元素拦截点击事件
不同dpr设备要动态适配scale值
硬写scale(0.5)只适用于dpr=2的设备（如iPhone 6/7/8），在dpr=3（iPhone X及以上）下会变成1.5px，仍不精准：
- 先通过
window.devicePixelRatio获取当前dpr - 计算缩放比：
1 / dpr，例如dpr=3 →scale(0.333) - 用JS注入style或切换CSS类，避免纯CSS无法响应dpr变化
- 注意：Safari对
transform缩放的子像素渲染支持不稳定，dpr=3时建议改用box-shadow或background-image方案
容易被忽略的兼容性与性能问题
这个技巧看似简单，但上线后常踩坑：
- Android UC、QQ浏览器对
transform-origin解析有偏差，建议加-webkit-transform-origin前缀 - 缩放后的伪元素可能触发重排（尤其是父容器宽高动态变化时），
will-change: transform可缓解但非万能 - 如果页面大量使用该方案，每个元素都创建两个伪元素（::before + ::after），叠加
transform会增加GPU负担，低端机易掉帧 - 圆角边框（
border-radius）用此法会失真——缩放会扭曲弧度，此时应改用background: linear-gradient模拟
真正稳定的1px方案往往不是单一CSS技巧，而是结合dpr检测、媒体查询、甚至服务端下发CSS变量。缩放只是起点，不是终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
