移动端 fixed 导航被软键盘顶起的本质是视口高度收缩导致定位异常，解决思路是避开键盘区域或改用稳定定位；优先使用 env(safe-area-inset-bottom) 并配合 viewport-fit=cover 实现动态适配。
移动端 fixed 导航在输入框获得焦点、软键盘弹出时被顶起，本质是浏览器视口高度动态收缩导致 fixed 元素仍按原始 viewport 高度定位，而实际可视区域变小。解决核心思路是：让导航避开键盘区域，或改用更稳定的定位策略。
优先用 env(safe-area-inset-bottom) 适配底部安全区与键盘
现代 iOS 和部分安卓浏览器支持 env(safe-area-inset-bottom)，它不仅能响应刘海/圆角，也能在软键盘弹出时自动更新为键盘高度（需开启 viewport 配置）。关键前提是：
- 页面
<meta name="viewport">必须包含viewport-fit=cover，例如：
- fixed 导航设为底部靠齐，并用
padding-bottom或bottom动态预留空间：
nav { position: fixed; bottom: env(safe-area-inset-bottom, 0); } - 若需兼容老版本 Safari（constant()（已废弃但仍有支持）：
bottom: constant(safe-area-inset-bottom, 0); bottom: env(safe-area-inset-bottom, 0);
软键盘触发时主动监听并调整布局
env() 虽好，但部分安卓机型（尤其 WebView 或旧版 Chrome）对键盘弹出不更新 safe-area-inset-bottom。此时可结合事件监听做兜底：
- 监听
focusin（非 focus，因 focus 可能不冒泡）到 input/textarea，获取当前window.innerHeight； - 对比页面加载完成时的初始高度，若明显变小（如缩小 200px 以上），视为键盘弹出，给导航加 class 如
keyboard-active； - CSS 中定义：
nav.keyboard-active { bottom: calc(env(safe-area-inset-bottom, 0) + Xpx); }（Xpx 是预估键盘高度，或用 JS 动态计算）
更稳健的替代方案：改用 position: sticky
对于底部导航栏，sticky 比 fixed 更可靠——它依赖父容器流式布局，不会脱离文档流，也不受软键盘缩 viewport 的干扰：
立即学习“前端免费学习笔记（深入）”；
- 确保导航父容器有明确高度（如
min-height: 100vh），且导航位于容器底部； - 设置：
nav { position: sticky; bottom: 0; } - 注意：sticky 需父容器有滚动上下文（如内容超出高度），若整个页面无滚动，可加
overflow-y: auto到 body 或主容器； - 配合
env(safe-area-inset-bottom)同样生效：
bottom: calc(env(safe-area-inset-bottom, 0));
补充建议：避免 fixed + height: 100vh 的组合
很多问题源于写法本身不合理：
-
html, body { height: 100vh; }在键盘弹出时会“假性撑高”，导致 fixed 元素错位； - 推荐用
min-height: 100vh替代height: 100vh； - 导航自身避免设
height: 100vh或top: 0; bottom: 0这类全屏拉伸写法。
基本上就这些。env(safe-area-inset-bottom) 是标准解法，sticky 是更普适的降级选择，两者结合覆盖绝大多数场景。不需要 hack，也不必引入第三方库。
