移动端H5中fixed元素软键盘弹起时“漂移”本质是锚定视觉视口底部导致的动态压缩现象；应优先使用env(keyboard-inset-bottom)（iOS 16.4+），降级采用visualViewport API监听或focusin/blur+innerHeight检测，也可用flex布局替代fixed实现稳定底部固定。
移动端 H5 中，position: fixed 元素在软键盘弹起时“漂移”，本质不是定位失效，而是它始终锚定在浏览器的视觉视口（visual viewport）底部，而软键盘会动态压缩这个视口高度——iOS 和 Android 的处理机制不同，导致表现不一致。解决的关键是不依赖静态 bottom 值，改用可响应式、可降级的动态适配策略。
优先用 env(keyboard-inset-bottom)（iOS 16.4+）
这是最干净、零 JS 的原生方案，仅限 iOS：
- 在
<head>中添加：<meta name="viewport" content="viewport-fit=cover"> - CSS 中直接写：
bottom: env(keyboard-inset-bottom, 0px); - 搭配
@supports not (bottom: env(keyboard-inset-bottom))提供降级样式，安卓自动走 fallback
用 visualViewport API 监听真实可视高度
比 window.innerHeight 更精准，不受软键盘抖动干扰，兼容 Chrome 61+、iOS Safari 15.4+：
- 页面加载时记录基准高度：
const baseHeight = visualViewport.height; - 监听变化：
visualViewport.addEventListener('resize', () => { const kbHeight = baseHeight - visualViewport.height; }) - 用
transform: translateY(kbHeight + 'px')或动态设置bottom，避免重排开销 - 老版本 WebView 不支持时，必须启用 JS fallback，不可只靠此 API
focusin/blur + 延迟读取 innerHeight（全平台兜底）
兼容性最广，但需注意触发时机和状态清理：
- 监听所有
input和textarea的focusin（非focus，冒泡更可靠） - 在回调中用
setTimeout(() => { ... }, 0)确保拿到键盘完全展开后的window.innerHeight - 若高度下降 >150px，临时将元素切为
position: absolute，并设bottom: ${window.innerHeight - inputRect.bottom}px -
blur后立即恢复position: fixed; bottom: 0，并清除内联top/bottom样式
用 flex 布局替代 fixed（适合底部固定区域）
绕过视口锚点问题，稳定性高，适合提交栏、TabBar 等结构化区域：
- 根容器（如
#app）设display: flex; flex-direction: column; min-height: 100vh; - 内容区用
flex: 1占满剩余空间 - 底部区域加
margin-top: auto或父容器设align-items: flex-end - 不依赖视口尺寸，不受键盘缩放影响，也不需要监听事件
