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，这时候修边框不如先查祖先元素的缩放状态。
