@media + transform: scaley() 是首选解法，因它精准识别设备像素比、纯视觉缩放不扰布局，且兼容安卓webview与旧ios；伪元素需设 transform-origin 与定位锚点对齐，避免偏位。
直接用 @media 检测 device-pixel-ratio 再配合 transform: scaleY() 缩放伪元素，是目前兼容性最稳、控制最细的解法。硬写 0.5px 在安卓 WebView 和旧 iOS 上大概率失效，viewport 缩放则会连带破坏字体、间距和点击区域。
为什么 media query + scaleY 是首选
因为边框变粗的本质不是“CSS 写错了”，而是浏览器把 1px 映射到了 2 或 3 个物理像素上，且不降采样。媒体查询能精准识别设备能力（min-device-pixel-ratio: 2），而 scaleY() 是纯视觉缩放，不影响布局流和盒模型计算。
-
0.5px声明在 iOS 8+ Safari 有效，但在 Android 大部分 WebView 中被当作0px渲染，边框直接消失 - 用
viewport缩放整个页面（如initial-scale=0.5）会导致字体模糊、touch 事件区域错位、rem 计算全乱 - 伪元素 +
scaleY()不依赖 JS，无运行时开销，样式即用即生效
底部单边边框怎么写才不偏位
关键不在缩放值，而在定位锚点和父容器约束。缩放默认以中心为原点，会导致伪元素上下浮动；必须显式指定 transform-origin 并确保父元素有定位上下文。
- 父元素必须设
position: relative，否则::after的absolute定位会脱标到 body -
transform-origin: 0 100%（左下角）才能让scaleY(0.5)从底部向上压缩，不破坏与父元素底边的对齐 - 伪元素用
height: 1px+background-color，别用border-bottom: 1px—— 后者受盒模型影响，缩放后可能挤占内容区 - 示例：
.line-bottom { position: relative; }<br>.line-bottom::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #ddd; transform: scaleY(0.5); transform-origin: 0 100%; }
四边边框缩放会不会压扁内容
不会压扁内容本身，但若错误地给主元素加 border 再缩放，会因 border 占用盒模型空间导致内容区变窄。正确做法是让伪元素撑开两倍区域再整体缩放。
- 四边伪元素需设
top: 0; left: 0; width: 200%; height: 200%，再transform: scale(0.5)，这样缩放后正好覆盖原始尺寸 - 必须加
box-sizing: border-box到伪元素上，否则缩放后边框位置容易飘移 -
transform-origin改为0 0（左上角），避免缩放后右/下边缘溢出 - 安卓低版本 WebView 对
scaleY支持弱，统一用scale(0.5)更稳妥
media query 的 DPR 条件怎么写才覆盖全
不能只写 min-device-pixel-ratio: 2，要兼顾旧版 WebKit 内核（如微信内置浏览器）和标准语法，且注意浮点数精度问题。
- 必须同时写两套：@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
- DPR=1.5 的设备（部分安卓中端机）要单独处理：
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)→transform: scaleY(0.66666) - 不要用
2.0这类带小数点的写法，某些 Android 浏览器会忽略；统一用整数或省略小数点 - 别漏掉 DPR=3 场景：
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)→transform: scaleY(0.33333)
真正难的不是写出缩放代码，而是理解缩放锚点如何影响对齐、伪元素尺寸如何与父容器耦合、以及不同 DPR 下的缩放比必须严格对应物理像素数。这些细节一旦错一个，边框就会偏 1px、断开、或者在某些机型上完全不可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
