1px在高DPR屏上变粗是因CSS像素映射多个物理像素，如iPhone13的dpr=3使1px渲染为3物理像素；最优解是伪元素配合transform:scale(1/dpr)缩放，并设transform-origin和pointer-events:none。
为什么 1px 在 iPhone 或安卓高分屏上看起来粗得离谱
不是你 CSS 写错了，是设备像素比（dpr）在捣鬼。比如 iPhone 13 的 dpr=3，浏览器把 1 个 CSS 像素渲染成 3×3 个物理像素，border: 1px solid #ccc 就真画出了 3 像素宽的边框。用户感知就是“怎么这么粗”，尤其在列表、卡片、输入框这些细节密集的地方特别明显。
直接写 border: 0.33px？不行——绝大多数浏览器不支持非整数 px 边框宽度（Safari 甚至会四舍五入回 1px）。
用 transform: scale() 缩放伪元素是最稳妥的方案
核心思路：不用真实边框，改用一个 ::after 伪元素模拟边框，再对它做缩放。这样既绕过浏览器对 px 的限制，又能精准控制物理像素粗细。
关键点在于缩放比例必须和当前设备 dpr 对齐：
立即学习“前端免费学习笔记（深入）”；
-
dpr = 2→ 缩放0.5 -
dpr = 3→ 缩放0.333333（不能写1/3，SCSS 不支持运行时除法） - 缩放后需重置
transform-origin，否则伪元素会偏移
SCSS 示例（带媒体查询适配）：
@mixin hairline-border($color: #ddd, $direction: 'bottom') {
position: relative;
&::after {
content: '';
position: absolute;
left: 0;
background-color: $color;
pointer-events: none;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
&::after {
@if $direction == 'bottom' {
bottom: 0;
left: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
transform-origin: bottom;
}
@if $direction == 'top' {
top: 0;
left: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
transform-origin: top;
}
@if $direction == 'left' {
top: 0;
left: 0;
width: 1px;
height: 100%;
transform: scaleX(0.5);
transform-origin: left;
}
@if $direction == 'right' {
top: 0;
right: 0;
width: 1px;
height: 100%;
transform: scaleX(0.5);
transform-origin: right;
}
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
&::after {
@if $direction == 'bottom' {
transform: scaleY(0.333333);
}
@if $direction == 'top' {
transform: scaleY(0.333333);
}
@if $direction == 'left' {
transform: scaleX(0.333333);
}
@if $direction == 'right' {
transform: scaleX(0.333333);
}
}
}
}
必须手动设置 z-index 和 box-sizing 才不会出错
伪元素默认层叠在内容下方，如果父容器有背景色或圆角，边框可能被裁掉或盖住。常见翻车点：
- 没加
z-index: 1→ 边框被兄弟元素遮挡 - 父元素用了
border-radius但没设overflow: hidden→ 伪元素圆角不匹配，露出直角 - 父元素
box-sizing: border-box但伪元素未脱离文档流 → 宽高计算错位，缩放后位置偏移 - 伪元素未设
top/right/bottom/left精确锚点 → 在不同机型上位置飘移
补救建议：统一给伪元素加 z-index: 1；所有用到该 mixin 的容器，显式声明 overflow: hidden（尤其卡片类组件）；避免在 position: relative 外层再套 transform，否则缩放会叠加失真。
别忘了降级：没有 dpr 查询的旧浏览器怎么办
IE10、部分 Android 4.x 浏览器不支持 -webkit-min-device-pixel-ratio，也不会进媒体查询块，此时伪元素不会渲染，等于没边框。
解决方法很简单：在常规样式里先写一层普通 1px 边框作为兜底：
.cell {
border-bottom: 1px solid #eee; // 兜底，老浏览器可见
@include hairline-border(#e0e0e0, 'bottom');
}
这样现代浏览器走伪元素缩放，老浏览器退化为普通边框，视觉差异可控，且不增加 JS 判断负担。
真正麻烦的是那些“半支持”环境：比如某些安卓 WebView 能识别 dpr 媒体查询，但 transform 缩放有毛刺或闪烁。这种只能靠真机测试 + 条件注释临时关闭，没法一劳永逸。
