iOS Safari中position:fixed在软键盘弹出时失效，本质是锚定视觉视口被上推或压缩导致错位；应监听focusin/blur事件，配合position:absolute动态切换、env(keyboard-inset-bottom)降级及flex布局兜底。
iOS Safari 中 position: fixed 在软键盘弹出时“失效”，不是样式没生效，而是它仍被计算为 fixed，但锚定的视觉视口（visualViewport）被上推或压缩，导致元素错位、飘在半空、甚至被顶出屏幕。真机上最典型的表现是底部按钮从屏幕底端滑到中间，松手后卡住不动。
为什么 focusin/blur 是唯一靠谱的监听入口
别信 window.addEventListener('resize')——iOS Safari 15.4+ 中它触发率低于 20%，安卓各厂 WebView 行为分裂，且常只在键盘收起时才触发一次。而 focusin（注意不是 focus）在用户点进 或 的瞬间就冒泡触发，时机精准、稳定、可预测。
- 必须监听所有可聚焦元素：
input、textarea、[contenteditable]，漏掉textarea就等于漏掉一半场景 - 监听后立刻检查
document.activeElement === targetEl，防止异步焦点转移导致状态错乱 -
blur回调里必须立刻清除内联样式并恢复position: fixed，否则滚动时元素直接消失或错位粘连
用 absolute 模拟 fixed 时的三个硬约束
单纯把 position: fixed 改成 position: absolute 不会解决问题，关键是要让它的定位锚点可控、可同步。
- 根容器（如
#app或body）必须设position: relative和min-height: 100vh（不能只写height: 100%，否则键盘弹出时塌陷） - 底部区域需加
width: 100%，否则横屏或缩放后偏移；内部建议用display: flex布局，不依赖文档流 - 聚焦时切为
position: absolute，但必须用setTimeout(() => {}, 0)延迟读取getBoundingClientRect()，否则拿到的是键盘弹出前的旧坐标
env(keyboard-inset-bottom) 能用但不能全靠它
bottom: env(keyboard-inset-bottom, 0px) 是 iOS Safari 16.4+ 原生支持的最优解，键盘弹出时自动返回键盘高度（单位 px），比 100dvh 更精准。但它有致命限制：
- 安卓完全不支持，旧版 Safari（如 15.3）也不识别
- 必须搭配
，否则变量值恒为 0 - 必须写 fallback：
bottom: env(keyboard-inset-bottom, 0px)，不能只写env(keyboard-inset-bottom)，否则键盘收起后按钮悬空 - 仅适合微调定位（如底部按钮上浮），不能用来撑高容器或替代布局逻辑
真正稳的方案其实是绕开 fixed
与其花大力气修 fixed，不如用 flex 把“固定”效果做进文档流：父容器设 display: flex; flex-direction: column; min-height: 100dvh，主内容区 flex: 1 占满剩余空间，底部栏作为兄弟节点靠 margin-top: auto 推到底部。
- 这个方案完全不依赖视口锚点，键盘弹出时位置纹丝不动
- 必须作用在「包含整个页面内容」的容器上，不能只套一层按钮再设
align-self: flex-end - 避免用
100vh直接设高度——iOS Safari 的100vh包含地址栏，实际可视区域更小；优先用min-height: 100dvh，老版本再 JS fallback
复杂点在于：多个输入框共用同一底部栏时，需统一管理焦点状态；微信 WebView 中即使用了 100dvh，有时首次唤起键盘仍会短暂错位——这时 focusin + setTimeout(() => window.scrollTo(0, 0), 100) 是绕不开的最后一道补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
