使用 visualViewport API 监听视口变化，当 height 下降超 150px 时判定键盘弹出，通过 classList 切换预设 CSS 类调整 fixed 元素位置，避免直接修改 style.top 导致重排，老版本降级为 focus/blur 监听。
移动端输入框聚焦后页面被顶起，position: fixed 元素错位怎么办
这不是 CSS 自身 bug，而是 iOS 和部分安卓 WebView 对 fixed 定位在软键盘弹出时的渲染策略不一致导致的。iOS 会把视口（visualViewport）高度压缩，但 fixed 元素仍按原始视口计算位置；安卓则更倾向“冻结”视口，但某些版本又会触发重排。结果就是：导航栏、悬浮按钮突然上移或卡在半空。
纯 CSS 几乎无法可靠解决——viewport meta 设置（如 height=device-height）已被现代浏览器忽略，scroll-behavior: smooth 或 transform: translateZ(0) 也无效。
- 别依赖
vh做fixed元素高度或 top 值，软键盘弹出后100vh仍等于屏幕物理高度，不是可用视口高度 - 避免对
body或html设置overflow: hidden，这可能阻断键盘收起时的正常滚动恢复 - 如果用了
position: sticky替代fixed，注意它依赖父容器滚动，软键盘弹出未必触发父容器重绘，行为更不可控
visualViewport API 是目前最靠谱的监听入口
它能实时反映软键盘弹出/收起导致的可视区域变化，比监听 resize 或 focusin 更精准——resize 在 iOS 上常延迟或不触发，focusin 又无法判断键盘是否真弹出了。
关键点：只在支持该 API 的环境（Chrome 61+、Safari 15.4+、Edge 79+）启用，老版本降级为无操作或简单 focus/blur 监听。
立即学习“前端免费学习笔记（深入）”；
-
visualViewport的height属性下降超过 150px 通常意味着键盘已弹出（不同机型阈值略有差异，150 是较稳妥下限） - 监听
visualViewport.addEventListener('resize', handler)，但要在页面加载完成后立即绑定，否则首次弹出可能错过事件 - 不要在 handler 中直接修改
style.top，优先用classList.toggle()切换预设 CSS 类，避免强制同步重排
if ('visualViewport' in window) {
const viewport = window.visualViewport;
const handleResize = () => {
const isKeyboardOpen = viewport.height < window.innerHeight - 150;
document.body.classList.toggle('keyboard-open', isKeyboardOpen);
};
viewport.addEventListener('resize', handleResize);
// 立即执行一次，覆盖初始状态
handleResize();
}配合 CSS 的 class 切换方案比内联 style 更稳定
用 JS 控制 class，让 CSS 承担位移逻辑，既利于复用，也避免因 JS 执行时机问题导致样式未生效。重点不是“动多少”，而是“什么时候动”和“动完是否回得去”。
- 给需要调整的
fixed元素加一个 wrapper，例如<div class="nav-wrapper"><nav class="nav">...</nav></div>，然后对.nav-wrapper应用位移，而非直接改.nav - 在
.keyboard-open下，用transform: translateY()而非top，前者不触发重排，动画更顺滑 - 必须写回退规则：当
.keyboard-open移除时，transform必须明确设为none或0，不能靠 inherit 或 unset，否则旧值残留
.keyboard-open .nav-wrapper {
transform: translateY(-180px); /* 根据典型键盘高度微调 */
}
.keyboard-open .nav-wrapper + .content {
padding-bottom: 180px; /* 防止内容被键盘盖住 */
}安卓 WebView 和微信内置浏览器的兼容性补丁
微信（尤其是 Android 版）和部分安卓 WebView 不支持 visualViewport，且软键盘行为更“暴力”：会强制滚动到输入框，甚至把 fixed 元素拖走。这时候得靠兜底策略。
- 监听
focusin事件，在目标为input或textarea时，立刻给body加keyboard-open类，并记录当前window.scrollY - 监听
blur事件，延时 300ms 再移除 class（因为键盘收起有动画，立即移除会导致闪跳），并尝试window.scrollTo(0, savedScrollY) - 对微信 UA 做特殊处理：
navigator.userAgent.includes('MicroMessenger')，禁用所有transform动画，改用top+will-change: top提升图层，减少闪烁
真正麻烦的不是弹出，是收起后视口没恢复、滚动锚点丢失、或者多个输入框切换时状态混乱。这些细节没法靠一套代码通吃，得留好钩子，比如暴露 window.__onKeyboardStateChange 给业务层干预。
