在 iPhone 上浏览网页或使用 Web App 时,经常遇到点击输入框后弹出的虚拟键盘遮挡了输入区域,导致用户无法看到自己正在输入的内容。这不仅影响体验,还可能造成误操作。本文将为你详细解析原因并提供多种实用解决方案。
在输入框获得焦点时,用 scrollIntoView 方法将其滚动到可视区域:
document.querySelectorAll('input, textarea').forEach(el => {
el.addEventListener('focus', () => {
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
});
});
fixed 元素在 iOS 键盘弹出时容易错位。建议改用 position: absolute 或基于 flex 的布局。
通过监听窗口 resize 事件判断键盘是否弹出,并临时调整页面高度或滚动位置。
确保 viewport 设置合理,避免缩放干扰:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
虽然 iOS 对软键盘的处理不如 Android 灵活,但通过合理的前端代码和布局策略,完全可以规避“键盘遮挡输入框”的问题。建议在移动端项目中提前测试并加入上述兼容逻辑。