应使用 padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); 并配合 ，确保 iPhone X+ 底部导航不被手势条遮挡且安卓无副作用。
fixed 底部导航在 iPhone X+ 上被刘海/圆角遮挡
直接用 position: fixed; bottom: 0 会让导航栏沉到屏幕最底，但 iOS 安全区（尤其是 iPhone X 及后续机型）的底部横条区域不参与布局计算，导致按钮被系统手势条盖住、点击失灵。
根本原因是 fixed 定位只认视口（viewport）边界，不感知安全区（safe area）——而 iOS 的「安全区」底部有约 34px 高度（非可配置），必须显式留白。
- 别依赖 JS 动态测
window.innerHeight或screen.availHeight，它们返回的值不含安全区偏移，不可靠 - 不要手动加
padding-bottom: 34px，安卓和旧 iOS 没这需求，会多出空白 - 优先用 CSS 原生方案，避免 JS 介入布局
用 env() 和 constant() 适配安全区（iOS + 部分安卓）
CSS 提供了 env(safe-area-inset-bottom)（现代标准）和已废弃但仍有兼容必要的 constant(safe-area-inset-bottom)。两者都返回安全区底部空隙的像素值，仅在支持设备上生效，不支持时自动 fallback 为 0。
正确写法是双写，确保老版 Safari（iOS 11.0–11.1）也能识别：
footer {
position: fixed;
bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* 其他样式... */
}
-
constant()在 iOS 11.2+ 已被移除，但不写它，iOS 11.0–11.1 会完全忽略底部留白 -
env()是当前标准，所有支持安全区的浏览器（包括 Chrome 69+ on Android）都认，但值为 0 时不触发重排，安全 - 别把
env()用在height或bottom上——它不能参与 calc() 外的数值计算（如bottom: env(safe-area-inset-bottom)无效），必须配合padding或margin
配合 viewport meta 防止缩放干扰安全区计算
如果页面 缺失或写了 user-scalable=yes，iOS 在双指缩放后可能重置安全区上下文，导致 env() 值错乱或失效。
必须确保 viewport 设置干净：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=cover是关键——它告诉 WebKit 允许内容延伸到安全区外，从而让env(safe-area-inset-*)可被正确读取 - 缺了它，即使写了
env()，iOS 也会强制将页面“收缩”进安全区内，env()返回 0，fixed 导航照样被盖 - 别写
maximum-scale或user-scalable，它们会干扰安全区检测逻辑
安卓全面屏设备要不要处理？
绝大多数安卓厂商（三星、小米、华为）的 WebView 和 Chrome 不解析 env(safe-area-inset-bottom)，也不暴露对应 API；它们的底部手势条是系统级覆盖层，不侵占网页布局空间，fixed 导航天然可见、可点。
所以：安卓无需任何额外 CSS，只要不主动加负 margin 或 overflow 隐藏，就没事。
- 某些定制 ROM（如早期 OPPO）曾模拟 iOS 安全区，但 2021 年后基本绝迹，不用专门 hack
- 如果你用 Cordova / Capacitor，需确认 WebView 插件版本 ≥ 7.0（对应 Chromium 75+），否则
env()在安卓端仍无效——但无效也没关系，它本来就不需要 - 真正要小心的是混合方案：比如用
padding-bottom写死 34px 后又加env()，安卓会叠加留白，底部出现大空隙
安全区不是“适配”，而是“声明”：你得明确告诉浏览器“我打算撑满视口”，然后用 env() 把系统保留的空间还回去。漏掉 viewport-fit=cover 或只写 env() 不写 constant()，在真实旧机型上就是白屏级失误——不是样式错，是交互直接挂掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
