手机上border: 1px看起来粗且糊，是因为高倍屏下CSS像素与物理像素未对齐；可靠方案是用transform: scaleY(0.5)缩放2px伪边框实现视觉1px。
为什么 border: 1px 在手机上看起来又粗又糊
因为高倍屏（如 iPhone 的 @2x/@3x）里，CSS 的 1px 实际对应多个物理像素，但浏览器默认把 1px 当作“设备独立像素”渲染，结果就是边框被强制拉伸、发虚。不是你写错了，是 CSS 像素和设备像素没对齐。
常见错误现象：border: 1px solid #ccc 在 iPhone 上看着像 2px 那么粗，边缘毛糙；用 border-width: 0.5px？大部分安卓机直接当 0 处理，边框消失。
- 只靠
border-width调整基本不可靠，兼容性差 - viewport 缩放（
initial-scale）会影响实际渲染，但不能乱调，否则影响整个页面缩放体验 - 真正靠谱的路子是：用
transform: scale()把一个 2px 的边框“压”回视觉 1px
用 transform: scaleY(0.5) 画一条真正的 1px 底边
核心思路：画一条 2px 的伪边框（比如用 ::after），再用 transform 在 Y 方向压缩一半——它在高倍屏上就精准落在 1 个物理像素上了。
使用场景：列表项下划线、卡片底部分割线、输入框下边框等单边需求。
立即学习“前端免费学习笔记（深入）”；
div.line-bottom {
position: relative;
}
div.line-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #ddd;
transform: scaleY(0.5);
transform-origin: 0 0;
}
-
transform-origin: 0 0很关键，否则缩放会偏移位置 - 必须设
position: relative在父元素上，否则::after定位失效 - 安卓部分低版本 WebView 对
scaleY(0.5)支持不稳定，可 fallback 到scale(0.5)（同时缩 X/Y）
左右/四边都想要 1px？改用 transform: scale(0.5) + box-sizing: border-box
单边好办，四边一起上就得小心盒模型打架。直接给元素加 border: 2px 再缩放，会导致内容区域被挤窄——因为 border 算进宽高了。
正确做法：用伪元素撑出 2px 边框区域，再整体缩放，内容区完全不受影响。
.border-1px {
position: relative;
}
.border-1px::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 2px solid #e5e5e5;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
}
- 宽高设为
200%是为了确保缩放后仍覆盖整个元素（尤其在padding存在时） -
pointer-events: none避免伪元素拦截点击事件 - 如果父元素用了
border-radius，这个方案会丢失圆角——得换background: linear-gradient或 SVG
哪些情况别硬套 transform 缩放
这法子不是银弹。遇到这些情况，缩放反而添乱：
- 需要精确控制边框颜色渐变或阴影（
box-shadow会随缩放模糊或错位） - 元素本身在做动画（
transform层叠可能导致渲染异常或卡顿） - 要支持 iOS Safari 8 以下（
transform缩放不支持 subpixel 渲染，还是糊） - 服务端渲染（SSR）+ 客户端 hydrate 场景下，伪元素可能闪一下才出现
真要保底，可以检测 window.devicePixelRatio，动态插入带 border-width 的 class，但多数项目直接上 transform 更省心——毕竟现在连低端安卓机都是 @2x 起步了。
最常被忽略的一点：缩放后的边框在截图或 PDF 导出时不会还原成 1px，它本质还是 2px 图形被压扁了。如果页面要打印或生成凭证，得单独写 media query 重置边框。
