问题描述
在 iPhone 的 Safari 或微信内置浏览器中，当用户点击输入框弹出键盘时，页面底部常常会多出一段无法滚动的空白区域。关闭键盘后，这段空白依然存在，影响用户体验。
这通常是因为 iOS 系统在键盘弹出时改变了视口（viewport）高度，但页面未正确适配安全区域（Safe Area）或未处理软键盘引起的布局偏移。
根本原因
- iOS 软键盘弹出时会压缩可视区域，但部分浏览器不会自动调整 body 高度。
- 页面使用了
100vh高度，而 iOS 中vh包含了状态栏和工具栏，导致计算错误。 - 未正确设置
viewport-fit=cover，无法使用env(safe-area-inset-*)安全区域变量。
解决方案
1. 设置正确的 viewport
在 <head> 中添加：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">2. 使用 CSS 安全区域适配
body {
padding-bottom: env(safe-area-inset-bottom);
}3. 避免使用 100vh
改用 JavaScript 动态设置高度：
function setAppHeight() {
const doc = document.documentElement;
doc.style.setProperty('--app-height', `${window.innerHeight}px`);
}
window.addEventListener('resize', setAppHeight);
setAppHeight();然后在 CSS 中使用：height: var(--app-height);
4. 监听焦点事件临时修复（备用方案）
// 输入框获得焦点时，滚动到顶部
document.querySelectorAll('input, textarea').forEach(el => {
el.addEventListener('focus', () => {
setTimeout(() => window.scrollTo(0, 0), 300);
});
});