sticky-bottom + env() 是当前最稳的组合，因 fixed 在 iOS Safari 和微信 WebView 中软键盘弹出时失位，而纯 env() 依赖 viewport-fit=cover 且安卓/旧 WebView 不支持；Bootstrap 的 sticky-bottom 基于 position: sticky，保留在文档流中不被键盘顶飞，配合 env() 做底部留白即可兼顾安全区与兼容性。
为什么 sticky-bottom + env() 是当前最稳的组合
因为 position: fixed 在 iOS Safari 和微信 WebView 中，软键盘弹出时会失位；而纯 env(safe-area-inset-bottom) 又依赖 viewport-fit=cover，安卓和旧 WebView 不支持。Bootstrap 的 sticky-bottom 本身是 position: sticky，它保留在文档流中，不会被键盘顶飞，且能自然响应父容器滚动 —— 只要配合 env() 做底部留白，就能兼顾安全区与兼容性。
必须满足的三个 HTML/CSS 前提条件
缺一不可，否则 sticky-bottom 不生效或安全区适配失败：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须存在，且viewport-fit=cover不能单独写，得和width=device-width共存 - 底部导航容器必须是其父容器的**最后一个子元素**（
sticky-bottom只对末尾元素有效） - 父容器需有明确高度并可滚动，推荐用
<div class="d-flex flex-column min-vh-100"> 包裹整个页面结构 <h3>padding-bottom: env(safe-area-inset-bottom) 该加在哪儿</h3> <p>别加在 <code>或<nav></nav>自身上 —— 前者会破坏滚动高度计算，后者在sticky下不撑开空间。正确位置是主内容容器（比如<main class="flex-fill"></main>）的padding-bottom：.main-content { padding-bottom: 16px; padding-bottom: env(safe-area-inset-bottom); padding-bottom: max(16px, env(safe-area-inset-bottom)); }这里用了三层声明：第一层是所有浏览器都认的 fallback；第二层让支持的 iOS 真机拿到精确像素值；第三层用
max()防止某些 iPad 返回 0px 时留白消失。立即学习“前端免费学习笔记（深入）”；
遇到 Safari 15.4 以下版本失效怎么办
这个版本之前，
env()不能直接用于padding-bottom单独声明，且@supports检测也不可靠（iOS 11.2 不支持@supports）。所以必须用 JS 做兜底：- 先写默认
padding-bottom: 16px，确保基础可用 - 用
matchMedia('(prefers-reduced-motion)')或 UA 字符串粗筛 iOS，再结合window.visualViewport?.height判断是否真机环境 - 检测到 iOS 且
env(safe-area-inset-bottom)未生效时，动态给.main-content加style.paddingBottom = '34px'（iPhone X/13 Pro 等主流机型值）
真正难的不是写对 CSS，而是意识到：env() 在 Safari 里不是“开了就灵”，它只在视口真正延伸进安全区时才非零 —— 而这个延伸，取决于你有没有把整个布局链（meta → html → body → container → main）的高度和 overflow 都理清楚。
- 先写默认
