安卓机上边框消失主因是border-width:0.5px被webview解析为0px；解决方案是用::after伪元素配合transform:scaley(0.5)实现物理1像素线，需同时满足dpr判断、尺寸设置、transform-origin、box-sizing和pointer-events五要素。
安卓机上边框消失，大概率不是 CSS 写错了，而是 border-width: 0.5px 被浏览器四舍五入为 0px，直接渲染成“无边框”。
为什么 border-width: 0.5px 在安卓上等于没写
多数安卓 WebView（尤其是 Android 4.4–9 的系统级浏览器、部分定制 ROM 内置浏览器）不支持小数像素值。它们会把 0.5px 当作非法值，强制向下取整为 0px —— 结果就是边框彻底消失，连一丝灰线都看不到。
这不是兼容性“差”，而是明确拒绝：Chrome for Android 从 50+ 版本起才开始逐步支持 0.5px，但很多预装 WebView 并未同步更新。
- 真机调试时，在 DevTools 的 Styles 面板里能看到
border-width: 0.5px被划掉（strikethrough），鼠标悬停提示 “Invalid property value” - 即使加了
@supports (border-width: 0.5px)，实际运行时也常返回false -
viewport缩放或transform: scale()不影响这个行为——它发生在样式解析阶段，早于布局和绘制
别信“iOS 可以，安卓也应该行”
iOS Safari 从 iOS 8 起就稳定支持 0.5px，但安卓阵营碎片化严重：华为 EMUI、小米 MIUI、OPPO ColorOS 的 WebView 底层可能用的是旧版 Chromium 或自研内核，对小数 px 的处理逻辑不一致。
更麻烦的是，同一台手机上，微信内置浏览器、QQ 浏览器、系统浏览器可能用不同内核，表现完全不同。
- 测试发现：Android 12 上 Chrome 115 支持
0.5px，但同设备的钉钉内置容器仍会归零 - 设计师给的“1px 细线”需求，在安卓上不能靠“赌兼容性”来实现
- 用 JS 检测
devicePixelRatio后动态插入0.5px类，也无法绕过解析阶段的取整
真正能落地的替代方案只有伪元素缩放
用 ::after 画一个 height: 2px 的块，再通过 transform: scaleY(0.5) 压到物理 1 像素，是目前唯一跨安卓全版本稳定的解法。
关键不是“看起来细”，而是让渲染引擎把这条线精准落在单个物理像素上——这跟 DPR 有关，跟浏览器是否认小数 px 无关。
- 父元素必须有
position: relative，否则::after会相对 body 定位 - 下边框场景，
transform-origin: left bottom必须显式写死，漏掉就会偏移 1px - 要加
pointer-events: none，否则伪元素会挡住点击区域 - 别用
border-bottom: 1px去画伪元素——它受盒模型影响，缩放后位置易飘
真正难的不是写出那几行 CSS，而是五个点必须同时对齐：DPR 判断、伪元素尺寸、transform-origin、box-sizing、pointer-events。少一个，边框就在某台安卓机上断开、错位或点不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
