移动端1px边框变粗是因设备像素比（dpr）导致，用transform:scale()缩放伪元素是最稳解法；非整数border不被广泛支持，需结合position、box-sizing、transform-origin及JS动态适配dpr。
移动端写 border: 1px 看起来像 2px 或 3px，不是你代码错了，是设备像素比（dpr）在起作用。iPhone 13 的 dpr=3，浏览器把 1 个 CSS 像素映射成 3×3 物理像素，border: 1px 就真画出了 3 像素宽的边框。用 transform: scale() 缩放伪元素是最稳、最可控的纯 CSS 解法。
为什么不能直接写 border: 0.5px 或 border: 0.33px
绝大多数浏览器不支持非整数 px 边框宽度：0.5px 在 iOS Safari 13+ 才开始有限支持，且安卓 WebView 普遍四舍五入回 1px；0.33px 更是直接被忽略或转为 1px。实测中，哪怕写了 border-width: 0.33px，getComputedStyle(el).borderWidth 仍返回 "1px"。这不是 bug，是渲染引擎的限制。
::after 伪元素 + scaleY(0.5) 实现下边框
这是列表项、卡片分隔线最常用也最容易出错的场景。关键点不在“缩放”，而在定位锚点和盒模型控制：
- 父元素必须设
position: relative，否则::after会相对于body定位 -
::after要设bottom: 0+transform-origin: left bottom（iOS 旧版需-webkit-transform-origin: left bottom），否则缩放后边框会抬高或下沉 - 别用
border-bottom: 1px，改用height: 2px+background-color，再transform: scaleY(0.5)，避免插值模糊 - 必须加
pointer-events: none，防止伪元素拦截点击 - Android 低版本 WebView 对
scaleY支持不稳定，可 fallback 到transform: scale(0.5)（同时缩 X/Y）
.border-bottom-1px {
position: relative;
}
.border-bottom-1px::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #ddd;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
pointer-events: none;
}
四边边框用 scale(0.5) 时 box-sizing 必须设为 border-box
如果伪元素设了 top: 0; left: 0; right: 0; bottom: 0; 并画 border: 1px solid，再 scale(0.5)，默认 box-sizing: content-box 会让 border 外扩 1px，缩放后位置偏移、四角露白或溢出。解决方法只有两个：
- 显式写
box-sizing: border-box，让 width/height 包含 border - 或者更稳妥：不用真实 border，改用
width: 200%; height: 200%+background或border，再transform: scale(0.5) transform-origin: 0 0 - 注意
transform-origin: 0 0是左上角锚点，确保缩放不漂移；若用50% 50%，dpr 变化时容易错位 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁掉——因为缩放基于原始尺寸计算，不是视觉尺寸
dpr 动态适配要靠 JS 注入类名，不能只靠媒体查询
@media (-webkit-min-device-pixel-ratio: 2) 只能粗略区分 dpr≥2，但无法区分 dpr=2 和 dpr=3。iPhone 13（dpr=3）需要 scale(0.333333)，而写死 scale(0.5) 在 dpr=3 下仍是 1.5 物理像素。真正精准的做法是：
- JS 获取
window.devicePixelRatio，计算缩放比1 / dpr - 动态给
加类名如hairline-dpr-3 - CSS 中写
.hairline-dpr-3 .border-1px::after { transform: scale(0.333333); } - 必须用小数（如
0.333333），不能写1/3—— CSS 不支持运行时除法，SCSS 编译时也不支持变量除法 - 伪元素要加
-webkit-backface-visibility: hidden，部分 iOS 旧版对 subpixel 缩放有渲染抖动
缩放本身不难，难的是锚点、盒模型、dpr 适配三者咬合。漏掉任意一个，边框就会偏移、模糊、被裁或失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
