优先使用 visualViewport API 动态调整底部按钮的 bottom 值，其 height 属性能准确反映键盘弹出后的可见区域变化；iOS Safari 15.4 以下则 fallback 到 focus/blur + setTimeout 延迟获取 innerHeight 差值，并确保 blur 时重置 bottom。
input聚焦时底部按钮被键盘顶起怎么办
移动端网页中，input 获取焦点后软键盘弹出，常导致固定在底部的按钮（如 position: fixed; bottom: 0;）被遮挡——这不是 CSS 写错了，而是浏览器默认行为：视口高度压缩、页面未主动响应键盘弹出事件。
纯靠 padding-bottom 或调整 bottom 值无法通用解决，因为不同机型、系统（iOS/Android）、浏览器对键盘高度的上报差异很大，且键盘收起后容易残留错误偏移。
- 不要在
focus事件里硬写死bottom: 200px—— iOS Safari 不触发resize，且键盘高度不可靠 - 避免监听
window.innerHeight变化来反推键盘高度 —— Android Chrome 在键盘弹出瞬间会先缩 viewport，再回弹，造成抖动 - 优先用
visualViewportAPI（现代浏览器支持），它能真实反映用户可见区域变化
用 visualViewport 监听可视区域变化
visualViewport 是目前最可靠的方案，它在键盘弹出/收起时准确触发 resize 事件，并提供 height 和 pageTop 等属性。适用于 Chrome 61+、Edge 79+、Safari 15.4+。
if ('visualViewport' in window) {
const btn = document.querySelector('.fixed-bottom-btn');
const updateBottom = () => {
// 键盘弹出时 visualViewport.height 明显变小（比如从 600→400）
// 我们把按钮 bottom 设为剩余不可见高度
const offset = window.innerHeight - visualViewport.height;
btn.style.bottom = offset + 'px';
};
visualViewport.addEventListener('resize', updateBottom);
// 页面卸载前清理
window.addEventListener('beforeunload', () => {
visualViewport.removeEventListener('resize', updateBottom);
});
}
注意：visualViewport.height 是当前可见高度，不是键盘高度；用 window.innerHeight - visualViewport.height 得到的是被遮挡部分，直接赋给 bottom 即可让按钮始终“浮”在键盘上方。
立即学习“前端免费学习笔记（深入）”；
iOS Safari 兼容 fallback：监听 focus/blur 手动控制
Safari 15.4 之前不支持 visualViewport，且其键盘弹出不触发 resize。此时需退回到事件驱动方式，但要规避常见坑：
- 不要只监听
focus—— 键盘可能延迟弹出，按钮已位移但键盘还没上来 - 用
setTimeout延迟 100ms 再读取window.innerHeight，更大概率拿到压缩后的值 - 必须同时监听
blur并重置bottom，否则键盘收起后按钮悬空 - 给按钮加
transition: bottom 0.2s避免跳变
const btn = document.querySelector('.fixed-bottom-btn');
const restoreBottom = () => btn.style.bottom = '0';
document.querySelectorAll('input, textarea').forEach(el => {
el.addEventListener('focus', () => {
setTimeout(() => {
const offset = window.innerHeight - window.visualViewport?.height || 0;
// fallback：若 visualViewport 不可用，粗略用 innerHeight 差值
btn.style.bottom = (offset || 200) + 'px';
}, 100);
});
el.addEventListener('blur', restoreBottom);
});
为什么不用 padding-bottom 模拟？
有人尝试给 body 加 padding-bottom 把按钮“撑”上去，这在逻辑上看似合理，但实际问题很多：
-
padding-bottom作用于文档流，而position: fixed元素完全脱离文档流，不受父级 padding 影响 - 即使给
html加padding-bottom，fixed 元素仍以视口为基准定位，不会自动上移 - 强行用
transform: translateY()会破坏滚动锚点，且在某些 Android 浏览器中触发渲染 bug - 键盘收起后，padding 不会自动恢复，需手动清理，极易遗漏
真正需要的是「动态响应可视区域边界」，而不是模拟遮挡效果。视觉上按钮没被盖住，不代表交互可用——如果按钮被键盘压住一半，用户点不到，那和遮挡没区别。
