本文介绍如何在 ios safari 中解决软键盘遮挡输入框的问题，通过 viewport 设置与动态高度调整，确保输入框始终可见，并在键盘收起后恢复页面布局。
本文介绍如何在 ios safari 中解决软键盘遮挡输入框的问题，通过 viewport 设置与动态高度调整，确保输入框始终可见，并在键盘收起后恢复页面布局。
在 iOS Safari 中，当用户点击 或
✅ 核心解决方案：双管齐下
1. 正确配置 viewport 元标签
在
中添加以下 meta 标签，禁用用户缩放并确保初始视口宽度匹配设备物理宽度，这是避免 Safari 异常缩放与滚动偏移的基础前提：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
⚠️ 注意：maximum-scale=1 和 user-scalable=no 在部分场景下可选，但若页面已启用交互式缩放（如地图、图表），建议仅保留 width=device-width, initial-scale=1，避免影响可访问性。
2. 动态适配 innerHeight 替代 100vh
键盘展开/收起会触发 window.resize 事件（iOS Safari 中该事件在键盘显示/隐藏时均会触发）。因此，应放弃静态 height: 100vh 布局，改用 JavaScript 动态绑定当前可用视口高度：
// 原生 JS 实现（推荐，无需 jQuery）
function updatePageHeight() {
const page = document.getElementById('myPage') || document.body;
page.style.height = `${window.innerHeight}px`;
}
// 页面加载完成 + resize 时更新
document.addEventListener('DOMContentLoaded', updatePageHeight);
window.addEventListener('resize', updatePageHeight);
// 可选：增强健壮性 —— 监听 focusin/focusout 补充微调
document.addEventListener('focusin', (e) => {
if (e.target.matches('input, textarea, select')) {
setTimeout(updatePageHeight, 100); // 确保 DOM 重排后执行
}
});✅ 实际布局建议（CSS 配合）
#myPage {
position: relative;
overflow-y: auto; /* 允许内容内滚动，而非整个页面跳动 */
box-sizing: border-box;
}
/* 避免 input 被键盘遮挡的额外技巧：聚焦时滚动至可视区域 */
input:focus, textarea:focus {
scroll-margin-top: 20px; /* 顶部预留安全间距 */
}? 注意事项与最佳实践
- 不要依赖 visualViewport API：iOS Safari 对 visualViewport.height 支持不稳定，且其变化延迟高于 resize 事件，不建议作为主方案。
- 慎用 scrollIntoView({ behavior: 'smooth' })：在 iOS 上可能触发意外页面抖动或失效，优先使用 scroll-margin-top + focus 自动滚动。
- 测试真机环境：模拟器无法准确复现键盘高度变化，务必在 iPhone 实机 Safari 中验证 resize 触发时机与高度值。
- 性能优化：resize 事件高频触发，上述代码中 updatePageHeight 已足够轻量；如页面复杂，可添加防抖（debounce），但通常非必需。
通过以上配置，页面将在键盘弹出时自动收缩高度、保持输入框可见；键盘收起后，resize 事件再次触发，页面无缝恢复全高布局，实现自然、可靠的用户体验。
