在 iOS Safari 上，底部固定定位的输入框一获焦，软键盘弹出来就直接把输入框给盖住了。

这事儿其实很常见，但不少人第一反应是去调 CSS，结果折腾半天也修不好。

你猜怎么着？问题根本不全在样式上。键盘弹出时，WebKit 会强制滚动页面、同时压缩 viewport，这两件事叠加在一起，才导致了输入框“消失”。

要彻底搞定这个问题，需要从四个方向同时下手。

第一步：修正 viewport 元标签

先看 里那个 viewport 标签。

重点是删掉 maximum-scale=1.0 和 user-scalable=no。

这两个参数在键盘弹出时会干扰视口重算，不但不能解决问题，反而会加剧遮挡。

替换成下面这个写法就行：

viewport-fit=cover 是 iOS 11 以上的标配，用来保证安全区（比如刘海、圆角）不被裁切，属于前置条件。

第二步：用 scrollIntoView 延迟强制可见

聚焦之后不能立刻调用滚动。因为 iOS 的键盘动画大约需要 250ms 才能完成布局，动作快了反而没用。

实测下来，400ms 是一个比较稳妥的延迟值——300ms 偶发失败，500ms 用户已经能感知到卡顿。

原生 JS 写法（兼容 iOS 12+）

input.addEventListener('focus', () => {
setTimeout(() => {
input.scrollIntoView({ block: 'nearest', inline: 'start' });
}, 400);
});

注意 block 参数必须用 'nearest'。如果用 'center'，输入框会居中上移太多；用 'end'，在某些机型上会触发异常滚动。这些细节踩过坑的自然懂。

Vue 3 组合式 API 写法（配合 ref）

const inputRef = ref(null);

在 handleFocus 中：
if (inputRef.value) {
setTimeout(() => inputRef.value.scrollIntoView({ block: 'nearest', inline: 'start' }), 400);
}

第三步：禁用 height: 100vh 这个隐形雷区

这一点比 JS 逻辑更优先修复——70% 的遮挡问题，根源其实在这里。

iOS Safari 在键盘弹出时不会重新计算 vh 单位，但会压缩视口高度。如果某个容器用了 height: 100vh，它会固执地撑满初始高度，结果就把输入框硬生生挤到屏幕外面去了。

检查所有用到 height: 100vh 的地方：body、#app、弹层根节点……全部替换成 min-height: 100vh 或 height: 100%（前提是父级有明确高度）。

改完之后，问题往往已经解决了一大半。

第四步：监听 resize + activeElement 做兜底判断

有些场景比较刁钻，比如快速连续点击不同输入框，scrollIntoView 仍可能失效。这时需要一套双保险机制：

• 第一步：监听 resize 事件
• 第二步：检查当前聚焦元素是否为 input / textarea
• 第三步：用 getBoundingClientRect().bottom 获取该元素底部位置
• 第四步：如果 bottom 值大于 window.innerHeight，说明确实被遮挡，立即执行 window.scrollTo(0, elementTop - 40)

减去 40px 是为了给输入框顶部留出安全间距，避免紧贴键盘边缘。

这套逻辑只在真实遮挡时才触发，不会造成无意义的页面滚动——干净、有效、不折腾。

《夸克》非常好用的免费AI浏览器

下载APP查看