window.devicePixelRatio 导致 1px 边框变粗是因为 CSS 的 px 是逻辑单位，DPR>1 时 1px 映射为多个物理像素；常用解决方案包括 transform: scaleY(0.5)降级、media 查询配合 0.5px 边框、避免滥用 viewport 缩放。
为什么 window.devicePixelRatio 会让 1px 边框变粗
设备像素比（DPR）大于 1 时，CSS 里的 1px 会被渲染成多个物理像素——比如在 iPhone 上 window.devicePixelRatio === 2，那border: 1px solid #000 实际占 2 个设备像素，视觉上明显更粗。这不是 bug，是浏览器按规范把逻辑像素映射到更高密度屏幕的结果。
关键点在于：CSS 的 px 是逻辑单位，不是物理单位；边框粗细由 DPR 和缩放共同决定，不单看数值。
用 transform: scaleY(0.5) 做视觉降级
这是最常用、兼容性最好的方案，原理是让元素在 Y 轴方向缩放到一半，再用 origin 对齐顶部 / 底部，使边框“看起来”只占 1 物理像素。
- 只适用于单边（上 / 下 / 左 / 右），不能同时四边都用
scaleY或scaleX - 必须配合
transform-origin，否则缩放中心偏移会导致位置错乱 - 要加
content-box或重置box-sizing，避免缩放影响 padding/border 布局计算 - 在高 DPR + 页面缩放（如 iOS 双指放大）下可能失效，需监听
resize和orientationchange
示例（下边框）：
.hairline-bottom {position: relative;} .hairline-bottom::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #ccc; transform: scaleY(0.5); transform-origin: bottom; }用 media 查询结合 min-resolution 写条件样式
现代方案，直接根据设备分辨率切换边框宽度，不依赖 JS 或 hack。但要注意 min-resolution 单位写法差异：
立即学习 “ 前端免费学习笔记（深入）”；
- Chrome/Firefox 支持
dppx（推荐）：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) - 旧版 Safari 只认
dpi，需换算（2dppx ≈ 192dpi） - 别混用
-webkit-min-device-pixel-ratio和min-resolution在同一个括号里，部分浏览器会整个忽略 - 这个方案无法响应运行时 DPR 变化（比如插拔外接屏），纯静态适配
示例：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {.border { border-width: 0.5px;} }注意：0.5px在支持它的浏览器里能正确渲染，不支持的会向上取整为1px。
用 JS 动态注入 viewport 缩放或修改根字号
有些老项目用 viewport 初始缩放强行把 DPR“抹平”，比如设置 initial-scale=0.5 让 2x 屏当 1x 用。但这会全局放大页面，导致字体模糊、点击区域变小、第三方组件适配异常。
- 不推荐改
viewport来解决边框问题，副作用太大 - 如果真要用 JS 控制，优先选动态写
:root变量或切换 class，而不是操作 meta 标签 -
0.5px边框在 iOS Safari 10+、Chrome 50+ 已稳定支持，JS 干预应作为兜底，而非首选 - 监听
window.devicePixelRatio变化不可靠——Safari 不触发resize，Android 部分机型也不报变
真正难的不是选哪种方法，而是得判断当前项目是否允许用 0.5px、有没有全局缩放干扰、要不要保 iOS 9 兼容。很多“1px 变粗”的问题，其实根源是父容器用了transform: scale() 或者zoom，这时候修边框不如先查祖先元素的缩放状态。
