iPhone键盘下面的空白怎么去掉？

在 iOS 设备（如 iPhone）上开发网页或 H5 应用时，经常会遇到一个问题：当用户点击输入框弹出系统键盘后，页面底部会出现一段无法滚动或清除的空白区域。这个问题在 Safari 和部分 WebView 中尤为常见。

问题原因

iOS 系统在弹出键盘时，并不会真正“压缩”网页可视区域，而是将整个视口向上平移，导致页面高度计算异常。尤其在使用 100vh 设置高度时，容易因视口高度变化而留下空白。

常见解决方案

1. 避免使用 100vh：改用 JavaScript 动态获取窗口高度。

function setAppHeight() {
  const app = document.getElementById('app');
  app.style.height = window.innerHeight + 'px';
}
window.addEventListener('resize', setAppHeight);
setAppHeight();

2. 监听聚焦/失焦事件：在输入框聚焦时临时调整页面滚动位置，防止空白残留。

document.querySelectorAll('input, textarea').forEach(el => {
  el.addEventListener('focus', () => {
    setTimeout(() => window.scrollTo(0, 0), 300);
  });
});

3. 使用 CSS 安全区域（谨慎）：配合 env(safe-area-inset-bottom) 调整布局，但对键盘空白帮助有限。

总结

目前尚无完美的纯 CSS 解决方案。推荐结合 JS 动态设置高度 + 输入框聚焦时滚动修复，可显著改善用户体验。同时建议在真实设备上充分测试不同 iOS 版本的表现。