iPhone上bottom:0点不到导航项是因WebKit默认不延伸视口至手势条区，需同时设viewport-fit=cover、用padding-bottom预留安全区空间，并分写env(safe-area-inset-bottom)避免calc兼容问题。
为什么 position: fixed; bottom: 0 在 iPhone 上点不到导航项
这不是 bug，是 WebKit 的设计行为：默认视口不延伸到手势条区域，bottom: 0 会把导航栏压进物理底边下方，导致热区被截断。用户手指点下去的位置，实际在屏幕外。
关键不是“往下挪一点”，而是让浏览器知道“这块区域需要留白”。必须同时满足三件事：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">—— 缺了这句，env(safe-area-inset-bottom)永远返回0px - 留白必须作用于内容区域的
padding-bottom（不是margin-bottom），否则无法撑开可用高度 - 导航栏自身用
position: fixed，但它的父容器（或 body）要承担“预留空间”的责任
padding-bottom: env(safe-area-inset-bottom) 为什么有时没效果
常见失效原因不是写法错，而是环境没到位：
- 安卓 WebView 或微信内置浏览器（尤其旧版）可能不支持
viewport-fit=cover，此时env()返回0，需靠 JS 检测 UA 并加降级 class - 写了
calc(60px + env(safe-area-inset-bottom))，但 Safari 15.4 之前不支持env()参与 calc 运算，整条声明会被丢弃 - 错误地把
env()用在bottom或height上 —— 它只对padding和margin有效 - 内容容器没设
box-sizing: border-box，导致padding-bottom让整体高度超出预期
安全写法是分两行：padding-bottom: 60px; padding-bottom: env(safe-area-inset-bottom);，低版本自动忽略第二行，高版本覆盖第一行。
立即学习“前端免费学习笔记（深入）”；
flex 布局撑满视口时，如何避免导航栏“钻进”内容里
用 display: flex; flex-direction: column 做全高布局比 fixed 更可控，但容易踩坑：
-
html和body都必须设height: 100%，否则子元素的flex: 1没参考高度 - 清除
body默认的margin: 8px，否则 flex 计算偏差会导致底部留空或溢出 - 底部导航栏必须和主内容同级，不能嵌套在 flex 容器内部 —— 否则它会被当成 flex 项目参与分配，高度失控
- 结构应为：
<div class="page-content"></div> <nav class="bottom-nav"></nav>，其中.page-content设flex: 1，.bottom-nav设固定高度（如height: 60px）
软键盘弹出后底部间距突然变大怎么办
这是 iOS Safari 和多数 WebView 的共性问题：env(safe-area-inset-bottom) 不会随软键盘弹出动态更新，但视口高度会缩，导致原本预留的 padding-bottom 过大，内容被顶到屏幕中间。
CSS 无解，必须用 JS 监听 resize 事件，并结合 window.visualViewport?.height 判断是否键盘弹出：
- 键盘弹出时，
visualViewport.height明显小于window.innerHeight - 此时可临时移除
padding-bottom，或改用margin-bottom+transform微调位置 - 别依赖
focus事件 —— 输入框聚焦不一定触发键盘（比如外接蓝牙键盘）
真正难的不是写对那几行 CSS，而是意识到：安全区适配不是“写一次就完事”，它在软键盘、横屏、双指缩放等场景下会反复失效，必须按真实交互路径逐个验证。
