fixed底部按钮被顶起是因浏览器将fixed锚定在视觉视口底部，软键盘压缩该视口导致定位偏移；ios与android实现不一致，需结合env(keyboard-inset-bottom)、visualviewport监听及absolute模拟等多方案兼容处理。
为什么fixed底部按钮会被顶起
这不是样式写错了，而是浏览器把 position: fixed 锚定在「视觉视口（visual viewport）」底部；软键盘弹出时，这个视口高度被压缩，但 fixed 元素仍按压缩前的基准计算位置，结果就“浮”到了键盘上方空白处。iOS 和安卓 WebView 对这一行为的实现不一致：iOS 常冻结 layout viewport 高度但上推页面，Android 多直接压缩 window.innerHeight，导致单纯靠 bottom: 0 或 100vh 完全不可靠。
用 env(keyboard-inset-bottom) 让 CSS 自动避让（iOS 16.4+）
这是目前最干净、零 JS 的方案，但仅限 iOS Safari 16.4 及以上支持：
- 必须在 <meta> 中启用适配：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- 底部按钮写法：bottom: env(keyboard-inset-bottom, 0px);
- 务必用 @supports 降级，否则旧版 Safari 会忽略整条规则：@supports (bottom: env(keyboard-inset-bottom)) {
.btn-footer { bottom: env(keyboard-inset-bottom, 0px); }
}
- 安卓完全不支持该变量，不能只靠它，必须配合 JS fallback
监听 focusin + visualViewport 动态调整（现代浏览器首选）visualViewport.height 是当前用户真正看到的高度，比抖动的 resize 或不稳定的 window.innerHeight 更准：
- 页面加载时存基准值：const baseHeight = visualViewport.height;
- 监听变化：visualViewport.addEventListener('resize', () => { const kbHeight = baseHeight - visualViewport.height; })
- 用 transform: translateY(${kbHeight}px) 调整按钮位置，比改 bottom 更少触发重排
- 不支持 visualViewport 的环境（如 iOS 15.3、部分安卓 WebView）必须降级到 focusin + 延迟读取 window.innerHeight用 position: absolute 模拟 fixed（兼容性最广）
核心不是换定位方式，而是控制祖先容器的稳定性：
- 根容器设 position: relative; height: 100vh;，并禁用 body 滚动：body { overflow: hidden; }
- 底部区域用 position: absolute; bottom: 0; width: 100%;
- 监听 focusin 到 input 或 textarea，用 setTimeout(() => { ... }, 0) 确保 DOM 更新完成后再读取 getBoundingClientRect().bottom
- 键盘弹出时加 class 切换为 position: static; margin-top: auto;，让它“沉”进内容流底部
- blur 后必须用 setTimeout(() => { window.scrollTo(0, 0); }, 100) 强制恢复滚动锚点，尤其 iOS 微信 WebView 中收起后常卡在高位
env(keyboard-inset-bottom) 让 CSS 自动避让（iOS 16.4+）
这是目前最干净、零 JS 的方案，但仅限 iOS Safari 16.4 及以上支持：
- 必须在 <meta> 中启用适配：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- 底部按钮写法：bottom: env(keyboard-inset-bottom, 0px);
- 务必用 @supports 降级，否则旧版 Safari 会忽略整条规则：@supports (bottom: env(keyboard-inset-bottom)) {
.btn-footer { bottom: env(keyboard-inset-bottom, 0px); }
}
- 安卓完全不支持该变量，不能只靠它，必须配合 JS fallback
监听 focusin + visualViewport 动态调整（现代浏览器首选）visualViewport.height 是当前用户真正看到的高度，比抖动的 resize 或不稳定的 window.innerHeight 更准：
- 页面加载时存基准值：const baseHeight = visualViewport.height;
- 监听变化：visualViewport.addEventListener('resize', () => { const kbHeight = baseHeight - visualViewport.height; })
- 用 transform: translateY(${kbHeight}px) 调整按钮位置，比改 bottom 更少触发重排
- 不支持 visualViewport 的环境（如 iOS 15.3、部分安卓 WebView）必须降级到 focusin + 延迟读取 window.innerHeight用 position: absolute 模拟 fixed（兼容性最广）
核心不是换定位方式，而是控制祖先容器的稳定性：
- 根容器设 position: relative; height: 100vh;，并禁用 body 滚动：body { overflow: hidden; }
- 底部区域用 position: absolute; bottom: 0; width: 100%;
- 监听 focusin 到 input 或 textarea，用 setTimeout(() => { ... }, 0) 确保 DOM 更新完成后再读取 getBoundingClientRect().bottom
- 键盘弹出时加 class 切换为 position: static; margin-top: auto;，让它“沉”进内容流底部
- blur 后必须用 setTimeout(() => { window.scrollTo(0, 0); }, 100) 强制恢复滚动锚点，尤其 iOS 微信 WebView 中收起后常卡在高位
position: absolute 模拟 fixed（兼容性最广）
核心不是换定位方式，而是控制祖先容器的稳定性：
- 根容器设 position: relative; height: 100vh;，并禁用 body 滚动：body { overflow: hidden; }
- 底部区域用 position: absolute; bottom: 0; width: 100%;
- 监听 focusin 到 input 或 textarea，用 setTimeout(() => { ... }, 0) 确保 DOM 更新完成后再读取 getBoundingClientRect().bottom
- 键盘弹出时加 class 切换为 position: static; margin-top: auto;，让它“沉”进内容流底部
- blur 后必须用 setTimeout(() => { window.scrollTo(0, 0); }, 100) 强制恢复滚动锚点，尤其 iOS 微信 WebView 中收起后常卡在高位
实际中最容易被忽略的，是键盘收起后 window.innerHeight 并不立即恢复、focusin 触发早于键盘完全展开、以及 Safari 对 scrollTo 的节流策略——这些都会让单次事件监听失效，得靠连续两帧高度对比或短间隔轮询来确认状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
