如何避免iOS键盘遮挡Web App底部固定按钮？

我完全懂你搜了好几个小时却找不到解决办法的烦躁——iOS上点击输入框唤起键盘时，底部的核心操作按钮直接被盖住，而Android上页面会被键盘正常顶上去，这种跨端行为不一致真的很影响用户体验。下面给你几个经过验证的方案，帮你实现和Android一致的效果：

方案一：监听键盘高度变化动态调整按钮位置 #

这是最可靠的方案，通过监听iOS键盘的弹出/收起事件，动态修改按钮的bottom值，避免被遮挡。

修改后的完整代码 #

body, html { margin: 0; min-height: 100vh; display: flex; flex-direction: column;}
.container { text-align: center; width: 100%; background: #ccc; flex: 1; }
.btn button { 
  background: blue; 
  width: 100%; 
  position: fixed; 
  bottom: 0; 
  left: 0; 
  padding: 30px; 
  box-sizing: border-box; 
  transition: bottom 0.3s ease; /* 加上过渡动画让体验更顺滑 */
}

<div class="container">
  <div>TITLE</div>
  <input type="text">
  <div class="btn">
    <button>SIGN IN</button>
  </div>
</div>

const signInBtn = document.querySelector('.btn button');
let originalBottom = 0;

// 监听iOS原生键盘弹出事件
window.addEventListener('keyboardWillShow', (e) => {
  const keyboardHeight = e.keyboardHeight;
  originalBottom = parseInt(window.getComputedStyle(signInBtn).bottom);
  signInBtn.style.bottom = `${keyboardHeight}px`;
});

// 监听iOS原生键盘收起事件
window.addEventListener('keyboardWillHide', () => {
  signInBtn.style.bottom = `${originalBottom}px`;
});

// 兼容部分iOS浏览器的resize兜底方案
window.addEventListener('resize', () => {
  const viewportHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;
  // 通过视口高度和文档高度差判断键盘状态
  if (viewportHeight === documentHeight) {
    signInBtn.style.bottom = `${originalBottom}px`;
  } else {
    const keyboardHeight = documentHeight - viewportHeight;
    signInBtn.style.bottom = `${keyboardHeight}px`;
  }
});

原理说明 #

iOS的键盘弹出时会触发keyboardWillShow和keyboardWillHide专属事件（部分第三方浏览器可能需要用resize事件兜底），我们通过获取键盘高度，动态调整固定按钮的bottom值，让它始终悬浮在键盘上方。

方案二：调整viewport+粘性定位（简易版） #

如果你不想写JS，可以尝试修改页面的viewport属性，配合粘性定位实现兼容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

然后修改按钮的CSS：

.btn {
  position: sticky;
  bottom: 0;
  width: 100%;
}
.btn button {
  background: blue;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
}

注意事项 #

这个方案胜在简单，但兼容性不如方案一，在部分iOS版本或小众浏览器中可能失效，适合快速测试场景。

为什么会出现这个差异？ #

Android系统默认会在键盘弹出时调整window.innerHeight，页面内容会自动向上滚动适配；而iOS对于position: fixed的元素，默认不会调整其布局位置，导致被键盘覆盖，这是两个系统在Web视图处理逻辑上的固有差异。

内容的提问来源于stack exchange，提问作者wanbesef