必须为主内容容器设置 margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)) 并配 viewport-fit=cover 元标签，否则 fixed 底部导航栏会遮挡内容且 iOS/微信 WebView 中软键盘触发错位；导航栏自身还需设 bottom: env(safe-area-inset-bottom) 避开手势区。
必须给主内容容器加 margin-bottom（或 padding-bottom），值为导航栏高度 + env(safe-area-inset-bottom)，同时配 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> —— 光写 position: fixed; bottom: 0 不解决遮挡，这是 CSS 规范行为，不是 bug。
为什么 fixed 底部栏一定遮内容
fixed 元素完全脱离文档流，浏览器渲染主内容时根本不知道底下有个导航栏。文字、按钮、表单会直接“长”进导航栏下面。尤其在 iOS Safari 或微信 WebView 中，滚动 + 软键盘弹出后错位更明显。
别指望 body { padding-bottom: 60px } 能兜底：它会让 scrollHeight 和 IntersectionObserver 判断失准；sticky 在 iOS Safari 对 bottom: 0 支持极差，微信 WebView 基本退化成 relative。
正确预留底部空间的写法
核心是让主内容容器（比如 <main></main> 或 .content）自己“让出位置”，而不是靠父容器撑空白。
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 自定义变量统一管理导航栏高度：
:root { --nav-height: 60px; } - 主内容加
margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); - 必须配
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env(safe-area-inset-bottom)返回0 - Android 旧版本和 Safari 低版本会忽略
env()并 fallback 为0，无副作用；iOS 则返回约34px
fixed 导航栏自身也要避开安全区
光留空还不够。如果导航栏按钮紧贴物理底部，iPhone X+ 的手势条会盖住点击区域，导致点不动。
- 导航栏自身设
bottom: env(safe-area-inset-bottom);，不是bottom: 0 - 或用更现代的写法：
inset-block-end: env(safe-area-inset-bottom); - 避免混用简写
inset时漏单位，比如inset: auto auto env(safe-area-inset-bottom) 0 - 不要在导航栏内部放
<input>或<textarea></textarea>—— 这会触发视口重排，加剧错位
软键盘弹出时的兼容处理
iOS Safari 不会自动重排 fixed 元素，导航栏可能“上浮”或被顶起。resize 事件也捕获不到键盘状态，不能依赖。
- 所有可聚焦元素加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，确保聚焦时不被遮挡 - 若需更高兼容性，优先考虑
position: sticky（需父容器min-height: 100vh且无transform）或flex布局方案（min-height: 100dvh+flex: 1+ 同级底部元素） -
env(keyboard-inset-bottom)仅 iOS Safari 16.4+ 支持，且必须用@supports (bottom: env(keyboard-inset-bottom))包裹，安卓完全不支持
最易被忽略的是：viewport-fit=cover 必须存在，否则 env() 变量失效；以及导航栏自身 bottom 值必须动态适配安全区，不能只靠主内容留白 —— 两者缺一不可。
