可用@supports(-webkit-overflow-scrolling:touch)精准识别ios，因仅safari支持；android需结合viewport完整配置、1px边框适配及flex/grid降级方案。
用 @supports 区分 iOS 和 Android 的渲染特性
纯 CSS 无法直接判断设备类型，但可以利用内核差异：iOS Safari 和大部分 Android 浏览器都基于 WebKit，但 Android Chrome 自 50+ 已逐步弃用部分私有前缀，而 -webkit-appearance 在 iOS 上稳定支持、在较新 Android 上可能被忽略或返回 unset。
更可靠的写法是结合 @supports 检测实际生效的渲染能力：
-
@supports (-webkit-overflow-scrolling: touch)—— 这个属性仅 iOS Safari 支持（用于平滑滚动），Android 全系不识别，可安全用于 iOS 专属样式 -
@supports (overscroll-behavior: contain)—— Android Chrome 71+ / iOS Safari 16.4+ 支持，但旧版 iOS 不支持，适合渐进增强 - 避免用
@supports (not (-webkit-appearance: none))做 Android 判定，因为部分 Android WebView 仍返回 true，误伤率高
viewport meta 标签必须加，且不能只写 width=device-width
很多安卓机型（尤其国产定制系统）会忽略不完整的 viewport 设置，导致布局视口错乱、字体异常放大或缩放失效。
推荐写法（已验证覆盖 Android 8–14、iOS 13–18）：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
-
initial-scale=1和maximum-scale=1缺一不可：某些华为/小米浏览器在横屏后会重置 scale，仅靠width=device-width不够 -
viewport-fit=cover是关键：适配 iPhone X 及之后的刘海屏，否则内容可能被齐刘海/小黑条裁切 - 不要加
minimum-scale：部分 OPPO/Vivo 浏览器会因此禁用双指缩放，影响可访问性
1px 边框在 iOS 和 Android 上表现不一致，别硬写 1px
iOS 设备（DPR=2/3）下 border: 1px solid #000 实际渲染为 2/3 物理像素，视觉粗重；而多数 Android 机型（尤其中低端）DPR=1 或渲染策略不同，1px 看起来反而过细或模糊。
统一方案不是“兼容”，而是绕过逻辑像素陷阱：
- 用伪元素 +
transform: scaleY(0.5)仅作用于 DPR≥2 的设备：@media (-webkit-min-device-pixel-ratio: 2)内生效 - 更现代的做法：改用
box-shadow: 0 0 0 0.5px #000，它不受 DPR 影响，在 iOS/Android 上都接近视觉 1px - 避免使用
background-image: linear-gradient()模拟边框——部分 Android 低版本 WebView 渲染偏色或闪烁
Flex/Grid 布局在安卓低版本 WebView 中容易塌陷
Android 4.4–6.0 的系统 WebView 基于 Chromium 30–49，对 display: grid 完全不支持，flex-wrap: wrap 行为也不稳定（比如子项高度计算错误）。
稳妥做法：
- Grid 布局必须加降级：
display: -ms-grid无意义（IE Mobile 已淘汰），真正有效的是用display: block+float或inline-block作为 fallback - 对于等宽多列，优先用
display: flex+flex: 1，而非grid-template-columns: repeat(auto-fit, ...)—— 后者在 Android 6 WebView 中解析失败会退成单列 - 测试重点机型：三星 S5（Android 6.0）、华为 P8（Android 5.0）、红米 Note 4（Android 7.0）—— 这些仍有一定存量用户
最易被忽略的一点：安卓微信内置浏览器（X5 内核）至今未完全支持 gap 属性，即使写了 gap: 12px，也得额外给子元素加 margin 模拟，否则列间距为 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
