1px在高DPR屏上变粗是因CSS像素映射多个物理像素，如iPhone13的dpr=3使1px渲染为3物理像素；最优解是伪元素配合transform:scale(1/dpr)缩放，并设transform-origin和pointer-events:none。
为什么
在 iPhone 或安卓高分屏上看起来粗得离谱
不是你 CSS 写错了，是设备像素比（
）在捣鬼。比如 iPhone 13 的
，浏览器把 1 个 CSS 像素渲染成 3×3 个物理像素，
就真画出了 3 像素宽的边框。用户感知就是“怎么这么粗”，尤其在列表、卡片、输入框这些细节密集的地方特别明显。
直接写
？不行——绝大多数浏览器不支持非整数
边框宽度（Safari 甚至会四舍五入回
）。
用
缩放伪元素是最稳妥的方案
核心思路：不用真实边框，改用一个
伪元素模拟边框，再对它做缩放。这样既绕过浏览器对
的限制，又能精准控制物理像素粗细。
关键点在于缩放比例必须和当前设备
对齐：
立即学习
“
前端免费学习笔记（深入）
”；
→ 缩放
→ 缩放
（不能写
，SCSS 不支持运行时除法）
缩放后需重置
，否则伪元素会偏移
SCSS 示例（带媒体查询适配）：
必须手动设置
和
才不会出错
伪元素默认层叠在内容下方，如果父容器有背景色或圆角，边框可能被裁掉或盖住。常见翻车点：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
没加
→ 边框被兄弟元素遮挡
父元素用了
但没设
→ 伪元素圆角不匹配，露出直角
父元素
但伪元素未脱离文档流 → 宽高计算错位，缩放后位置偏移
伪元素未设
精确锚点 → 在不同机型上位置飘移
补救建议：统一给伪元素加
；所有用到该 mixin 的容器，显式声明
（尤其卡片类组件）；避免在
外层再套
，否则缩放会叠加失真。
别忘了降级：没有
查询的旧浏览器怎么办
IE10、部分 Android 4.x 浏览器不支持
，也不会进媒体查询块，此时伪元素不会渲染，等于没边框。
解决方法很简单：在常规样式里先写一层普通
边框作为兜底：
这样现代浏览器走伪元素缩放，老浏览器退化为普通边框，视觉差异可控，且不增加 JS 判断负担。
真正麻烦的是那些“半支持”环境：比如某些安卓 WebView 能识别
媒体查询，但
缩放有毛刺或闪烁。这种只能靠真机测试 + 条件注释临时关闭，没法一劳永逸。
1pxdprdpr=3border: 1px solid #cccborder: 0.33pxpx1pxtransform: scale()::afterpxdprdpr = 20.5dpr = 30.3333331/3transform-origin@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-indexbox-sizingz-index: 1border-radiusoverflow: hiddenbox-sizing: border-boxtop/right/bottom/leftz-index: 1overflow: hiddenposition: relativetransformdpr-webkit-min-device-pixel-ratio1px.cell {
border-bottom: 1px solid #eee; // 兜底，老浏览器可见
@include hairline-border(#e0e0e0, 'bottom');
}dprtransform