fixed底部栏遮挡内容是因为其完全脱离文档流，浏览器渲染主内容时无法感知其存在；必须为主内容容器设置margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom))并配合viewport-fit=cover，才能正确预留安全区与导航栏空间。
必须给主内容容器加 margin-bottom，值为导航栏高度 + env(safe-area-inset-bottom)，不能只靠 position: fixed 一招了事。
为什么 fixed 底部栏一定会遮内容
fixed 元素完全脱离文档流，浏览器渲染主内容时根本不知道底下有个导航栏。文字、按钮、表单会直接“长”进导航栏下面——这不是 bug，是 CSS 规范本身的行为。尤其在 iOS Safari 或微信 WebView 中，滚动 + 软键盘弹出后，错位更明显。
- 别指望
body { padding-bottom: 60px }能兜底：它会让scrollHeight和IntersectionObserver判断失准 - 别用百分比写死高度（如
height: 8%）：不同设备视口高度不同，padding-bottom的百分比却按宽度计算，必然错位 - sticky 不行：iOS Safari 对
bottom: 0的 sticky 支持极差，微信 WebView 基本退化成relative
正确预留底部空间的写法
核心是让主内容容器（比如 或 .content）自己“让出位置”，而不是靠父容器撑空白。
- 用 CSS 自定义变量统一管理导航栏高度：
:root { --nav-height: 60px; } - 主内容加
margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); - 必须配
，否则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 - 不要在导航栏内部放
或——这会触发视口重排，加剧错位
软键盘弹出时的兼容处理
键盘弹起时，iOS Safari 不会自动重排 fixed 元素，导航栏可能“上浮”或被顶起。resize 事件也捕获不到键盘状态，不能依赖。
- 所有可聚焦元素加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，确保聚焦时不被遮挡 - 微信 WebView 可 UA 判断：
navigator.userAgent.includes('MiniProgram')，做降级处理 - 别信
window.innerHeight：它不反映安全区偏移，也不随键盘动态变化
最易被忽略的一点：z-index 不是越高越好。设 z-index: 9999 可能压住系统级弹窗（如 iOS 分享面板），建议控制在 100～200 区间，并检查导航栏外层是否用了 transform 或 filter——这些会隐式创建新层叠上下文，让子元素 z-index 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
