最稳定方案是rem+动态根字号配合env(safe-area-inset-*)修正安全区；px和%因双端渲染差异大、不可控，易导致间距不一致，应避免用于间距控制。
直接用 rem + 动态根字号，配合 env(safe-area-inset-*) 修正安全区，是目前最稳定、可维护性最强的方案。别碰 px 或 % 做间距，它们在双端表现差异大且不可控。
为什么 px 和 % 在 Android/iOS 上间距不一致
Android WebView（尤其旧版 Chrome 或厂商定制内核）对 px 的物理像素映射受缩放、DPR、viewport 解析影响更大；iOS Safari 则更严格遵循 CSS 规范，但会因安全区、字体渲染引擎差异导致相同 px 值视觉密度不同。% 更危险：它按父容器宽高计算，而父子容器在不同端的盒模型解析（比如 border-box vs content-box 默认行为）、flex wrap 行高处理、甚至 line-height 渲染精度都不同，造成上下/左右间距比例失衡。
常见错误现象：
- 同一段
padding: 16px，iOS 看着紧凑，Android 显得松散 -
margin: 2%在 iPhone 14 Pro 上顶部留白 8px，同分辨率安卓机却变成 14px - Flex 容器里两个子项设
margin-right: 10px，iOS 下末项多出 10px 空隙，Android 正常
用 rem + calc(100vw / N) 动态控制根字号
核心不是“换单位”，而是让 1rem 的物理尺寸随视口宽度线性变化，从而保证所有间距类属性（margin、padding、gap、line-height）等比缩放。iOS 和 Android 对 rem 的支持度都很高（iOS 5+、Android 2.1+），且不受 viewport 缩放干扰。
实操建议：
- 统一以设计稿宽度（如 375px）为基准，设
:root { font-size: calc(100vw / 37.5); }→ 此时 1rem = 10px（375px 屏） - 必须用
calc()，不能写死font-size: 10px，否则在横屏或非标准分辨率下失效 - 给
:root加媒体查询兜底：@media (max-width: 320px) { :root { font-size: 8px; } }防止小屏字太小 -
gap必须同步用 rem，iOS 14.5+/Android Chrome 84+ 均支持；若需兼容更低版本，用margin+:last-child降级
安全区（safe area）带来的顶部/底部间距偏移
iOS 的 env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 是动态值，Android Chrome 69+ 才开始支持，且部分国产浏览器（如 UC、QQ 浏览器）仍不识别。直接写 padding-top: env(safe-area-inset-top) 在 Android 上会 fallback 为 0，导致顶部内容被刘海遮挡。
稳妥写法（必须并写）：
.header {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
注意：
-
constant()是 iOS 11.0–11.1 的私有前缀，iOS 11.2+ 已废弃但保留兼容；Android 完全忽略它，无副作用 - 不要只靠 CSS 变量撑开安全区——如果页面有固定定位的导航栏，还需 JS 监听
resize事件动态调整高度，否则横屏时 inset 值突变会导致布局跳动 - 底部安全区（
env(safe-area-inset-bottom)）主要影响 iOS Home Indicator，Android 手势条区域一般由系统自动预留，无需额外 padding，除非你用了position: fixed; bottom: 0
Flex 布局中 align-content 和 gap 的双端陷阱
iOS Safari（尤其 14.x–15.x）对 flex-wrap: wrap 容器的 align-content 默认值（stretch）处理异常，会导致换行后末行项目垂直位置漂移；而 Android Chrome 通常正常。同时，gap 在 iOS 上对 flex-direction: column 的首尾项间距控制不如 Android 精确。
解决方案：
- 所有多行 flex 容器显式声明
align-content: flex-start，避免 iOS 下末行塌陷或上浮 - 优先用
gap控制子项间距，但需测试 iOS 是否出现首项顶部/末项底部缺失间隙 —— 若有，加padding补齐 - 禁用
margin-bottom单独控制垂直间距，改用gap或统一margin-bottom+:last-child { margin-bottom: 0; } - 不要依赖
justify-content: space-between在双端保持相同视觉节奏，iOS 下子项实际分布可能因文字渲染微差而错位，改用gap更可控
真正难的不是写对第一版，而是当新机型（比如 iPhone 16 Pro 的 2556×1179 分辨率）或新系统（iOS 18 / Android 15 WebView 更新）发布时，env() 值是否被正确注入、calc() 是否触发重排、gap 是否在某些 WebView 中退化为 0 —— 这些必须靠真机回归，不能只信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
