iphone x+ 上 fixed 底部导航被“小黑条”盖住，是因为 bottom: 0 只对齐物理底边，不感知安全区；必须配合 viewport-fit=cover 和 padding-bottom: env(safe-area-inset-bottom, 0px)（含 constant 兼容声明）适配，主内容区需用 calc(var(--nav-height) + env(...)) 留空。
为什么 fixed 底部导航在 iPhone X+ 上总被“小黑条”盖住
因为 position: fixed; bottom: 0 只认视口物理底边，不感知 iOS 安全区——系统在屏幕最底部预留约 34px 的手势操作区（Home Indicator），而 CSS 默认把它当“可绘制区域”。结果就是按钮沉进黑条里，点击失灵。这不是 bug，是规范行为。
常见错误现象包括：
• 页面滚动后底部按钮突然半透明或消失
• 点击区域偏移，手指戳在黑条上没反应
• 横屏时安全区高度变化，但样式没更新
- 别用
bottom: env(safe-area-inset-bottom)：这会让整个元素上移，脱离底部位置 - 别硬写
padding-bottom: 34px：安卓和旧 iOS 会多出空白，且 iPhone 14 Pro Max 实测值是 39px - 别依赖 JS 测
window.innerHeight：它不包含安全区偏移，返回值不可靠
必须加的 和双声明 fallback 写法
没有 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，env(safe-area-inset-bottom) 在 iOS 上永远返回 0px。这是前提，不是可选项。
CSS 必须同时写两条声明，覆盖 iOS 11.1 及更早版本：
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
-
constant()是 iOS 11.1 及之前唯一支持的写法，iOS 11.2+ 已废弃但保留兼容 -
env(..., 0px)中的0px是降级值，不支持时 fallback 为 0，无副作用 - 不能合并成
calc(60px + env(safe-area-inset-bottom))：Safari 15.4 之前不支持 calc 里混用 env()
主内容区怎么留空才不踩坑
fixed 元素脱离文档流，浏览器渲染 <main></main> 时“看不见”它，所以必须手动给主内容容器留出空间。关键不是加多少，而是加在哪、怎么加。
- 用
padding-bottom，不用margin-bottom：后者在 flex/grid 布局中可能被折叠，且影响IntersectionObserver判断 - 不要设在
上：会污染document.body.scrollHeight，导致滚动监听异常 - 推荐统一变量写法：
:root { --nav-height: 60px; }，再写main { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); } - 如果导航栏用了
box-sizing: content-box（默认），记得把padding和border都算进--nav-height
微信内置浏览器和老安卓的兜底策略
微信 iOS 版（尤其 8.0.30 之前）对 env() 解析不稳定，部分机型直接返回 0，导致 padding 失效、导航被遮。这时候纯 CSS 不够用。
稳妥做法是 CSS + JS 双保险：
- CSS 层先写双声明，覆盖大部分场景
- JS 检测是否生效：
getComputedStyle(document.documentElement).getPropertyValue('padding-bottom')是否含非零像素值 - 若未生效，动态加 class：
document.documentElement.classList.add('safe-area-fallback')，再用 CSS 规则补位 - 注意：JS 获取的
safe-area-inset-bottom值不可信，只能用于检测 fallback 是否触发，不能用于计算
真正容易被忽略的是横屏切换——env(safe-area-inset-bottom) 在横屏时会变小甚至为 0，但很多项目只在页面加载时执行一次 JS 补位，后续没监听 resize 事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
