移动端H5底部悬浮按钮被系统手势区遮挡，需动态贴合安全底部边界：先设viewport-fit=cover启用安全变量，再用env(safe-area-inset-bottom)适配iOS，Android通过轮询window.innerHeight计算safeBottom，uni-app推荐bottom:calc(var(--window-bottom)+env(safe-area-inset-bottom))统一多端。
移动端 H5 底部悬浮按钮被系统手势区（如 iOS 的 Home Indicator、Android 虚拟导航栏、鸿蒙手势条）遮挡，本质是视口坐标系与系统 UI 区域未对齐。解决核心不是“加 z-index”或“调 bottom 值”，而是让按钮位置动态贴合内容安全底部边界。
设置 viewport-fit=cover 激活安全区变量
这是所有适配的前提，没有它，iOS 的 env(safe-area-inset-bottom) 始终为 0：
- 在页面
<head>中加入：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 该配置告诉 Safari 和 WKWebView：允许内容渲染到屏幕边缘，同时启用系统提供的安全区环境变量
- 注意：仅设此 meta 不够，必须配合后续 CSS 或 JS 计算使用，否则按钮仍会被截断
用 env(safe-area-inset-bottom) 适配 iOS 全面屏
iOS 11+ 提供了原生安全区变量，适用于 fixed 悬浮按钮：
- 推荐写法（兼容性好、无需 JS）：
bottom: env(safe-area-inset-bottom); - 若按钮需留白或与其他元素对齐，可叠加：
bottom: calc(env(safe-area-inset-bottom) + 8px); - 注意：该变量在 Android 和桌面端返回 0，多端共用安全；但不能单独依赖它处理 Android 虚拟按键
动态监听并计算 Android 虚拟导航栏高度
Android 没有标准 safe-area 变量，window.innerHeight 在导航栏显隐时不自动更新，需轮询检测：
- 在 Vue 组件
mounted中启动定时器（每 100ms）：
读取window.innerHeight，对比上一次值，变化超过 20px 才认定为有效避让高度 - 安全高度建议公式：
safeBottom = Math.max(0, window.screen.height - window.innerHeight - 20)
（-20 是预留容错，覆盖 MIUI/ColorOS 等定制系统浮动导航栏） - 给按钮容器加响应式样式：
:style="{ paddingBottom: safeBottom + 'px' }"
比bottom: ...px更稳定，避免 WebView fixed 渲染异常
uni-app 多端统一方案：--window-bottom + 安全区叠加
uni-app H5 端内置了 --window-bottom 变量（默认为 TabBar 高度，约 50px），它与安全区变量可组合使用：
- 同时避开 TabBar 和系统手势条：
bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom)); - Android 下
env(safe-area-inset-bottom)为 0，只生效--window-bottom；iOS 下两者叠加，精准避让 - 该写法无需条件编译，
--window-bottom在 App 和小程序中为 0，天然多端安全
