必须添加，否则env(safe-area-inset-bottom)恒为0；该值仅在viewport-fit=cover下生效，且应作用于padding-bottom或inset等支持环境变量的css属性，不可用于bottom。
iPhone 底部小黑条（Home Indicator）遮挡固定按钮，本质不是样式写错了，而是视口没“放开”安全区。关键一步没做，后面所有 CSS 都白搭。
必须加 viewport-fit=cover
这是整个适配的前提，缺一不可：
- 不加这句，
env(safe-area-inset-bottom)永远返回 0，Safari 直接忽略 -
viewport-fit=contain是默认行为，会把内容严格限制在安全区内，反而让 fixed 元素锚定在“被压缩后的视口底边”，正好落在黑条下方 - 微信 iOS 客户端 8.0.32 之前版本可能忽略该属性，需 JS UA 检测 fallback 到
padding-bottom: 34px
正确使用 env(safe-area-inset-bottom)
它不是定位值，不能直接写 bottom: env(...)（Safari 会静默丢弃整行），而应作用于尺寸或内边距：
- 推荐写法：
padding-bottom: env(safe-area-inset-bottom); height: 60px;（固定高度栏） - 或更语义化：
inset: auto auto env(safe-area-inset-bottom) 0;（替代bottom: 0） - 不要只靠 padding 帽子式撑高，要配合明确的 height / min-height，否则在部分机型上可能失效
- 兼容老 iOS 11.0–11.1：可叠加
padding-bottom: constant(safe-area-inset-bottom);，新版浏览器会优先用 env()
iframe 场景要特别注意
如果 H5 页面嵌在 iframe 里（比如 App WebView 加载活动页），env() 在 iframe 内默认无效：
- 原因：iframe 是隔离渲染环境，它的“底部”不是设备物理底边，
safe-area-inset-bottom计算基准错误 - 解决办法：确保 iframe 元素本身设为
width: 100vw; height: 100vh;，且其内部高度撑满 - 同时 iframe 的
srcdoc或加载页面里也必须包含viewport-fit=cover的 meta 标签 - 别指望父页面传 CSS 变量进来——env() 不跨 iframe 传递
其他易踩坑细节
这些细节不显眼，但常导致适配失败：
-
不要给 设
overflow: hidden：键盘弹出时，fixed 元素会被裁剪，安全区计算异常 - 安全区域高度是动态的：横屏时可能变成 21px，播放视频时可能归零，所以不能硬编码
- 顶部刘海一般由浏览器自动处理，H5 开发者主要关注
safe-area-inset-bottom即可 - 测试务必用真机或 Safari Web Inspector 的设备模拟，Chrome DevTools 的 iPhone 模拟仅作初步参考
