移动端软键盘弹起时fixed元素被顶起或遮挡是iOS Safari（iOS 15+）和部分安卓WebView的典型问题；根本原因是viewport高度压缩但fixed元素仍按原始视口定位，CSS无法感知键盘状态，需结合dvh、避免transform、JS动态切换absolute/fixed并用visualViewport.height提升兼容性。
移动端软键盘弹起时fixed元素被顶起或遮挡
这是 iOS Safari（尤其是 iOS 15+）和部分安卓 WebView 的典型表现：当 <input> 获得焦点、软键盘弹出后，viewport 高度被压缩，但 position: fixed 元素仍按原始视口计算位置，导致底部按钮上移、输入框被遮盖，甚至整个 fixed 区域“悬浮”在键盘上方空白处。
用 CSS 做不到彻底解决，但可以缓解
CSS 本身无法感知软键盘状态，height: 100vh 或 bottom: 0 在键盘弹出后不会自动重算。不过有三个实用技巧可降低出错概率：
- 避免对输入框父容器或同级
fixed元素使用transform（如translateZ(0)），它会触发 iOS 的独立合成层，加剧定位偏移 - 给
body加overscroll-behavior: contain，防止键盘弹出时页面意外滚动回弹 - 用
min-height: 100dvh替代100vh（仅限支持dvh的浏览器，iOS 16.4+ / Android Chrome 109+），dvh是“动态视口高度”，会随键盘自动调整
必须用 JS 检测键盘状态并切换定位方式
核心思路是：监听 focusin 和 blur，在输入框聚焦时将底部 fixed 元素临时改为 position: absolute，并手动设置 bottom 为当前可视区域底部距离（即 window.innerHeight - input.getBoundingClientRect().bottom）。
- 不要监听
resize—— 键盘弹出时 iOS 不一定触发该事件，且安卓行为不一致 - 必须在
focusin后加setTimeout(..., 0)，确保 DOM 更新完成后再读取getBoundingClientRect() - 记得在
blur后恢复fixed，否则页面滚动时定位错乱 - 对多个输入框共用同一底部栏时，需统一管理焦点状态，避免重复切换
const footer = document.querySelector('.footer');
const inputs = document.querySelectorAll('input, textarea');
<p>inputs.forEach(input => {
input.addEventListener('focusin', () => {
setTimeout(() => {
const rect = input.getBoundingClientRect();
footer.style.position = 'absolute';
footer.style.bottom = <code>${window.innerHeight - rect.bottom}px</code>;
}, 0);
});</p><p>input.addEventListener('blur', () => {
footer.style.position = 'fixed';
footer.style.bottom = '0';
});
});安卓与 iOS 行为差异导致的兼容性坑
iOS Safari 默认将软键盘视为“覆盖层”，不改变 window.innerHeight；而多数安卓浏览器（Chrome、Edge）会真实缩小视口，使 window.innerHeight 变小。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 直接用
window.innerHeight计算 bottom 值，在 iOS 上会偏大（因为没变），在安卓上可能刚好 - 依赖
visualViewport.height更可靠（iOS 15.4+ / Chrome 61+ 支持），它始终反映当前可见区域高度 - 若项目需兼容 iOS 14 或更早版本，只能 fallback 到监听
focusin/blur+ 手动测距，且需针对不同机型做微调（如 iPhone X 系列需额外减去安全区）
真正麻烦的不是怎么切 fixed 和 absolute，而是软键盘收起时机不可控——用户点“完成”、点空白、切应用再切回来，每种路径下 blur 触发时机和顺序都不同，必须加防抖和状态锁。
