iOS 15虚拟键盘激活时如何显示被地址栏遮挡的输入内容

API 探路者

2026-10-2

问题根因

iOS 15 底部地址栏模式下存在WebKit内核视口计算bug，100vh 取值不会自动排除弹出的虚拟键盘高度与底部地址栏高度，而你尝试使用的 safe-area-inset-bottom 仅适配设备物理安全区范围，不会响应键盘弹出的动态高度变化，因此无法解决遮挡问题。

可用解决方案

方案1：使用CSS动态视口单位（推荐）

将容器的固定高度单位从vh替换为动态视口单位dvh，dvh会自动排除地址栏、虚拟键盘等浏览器UI的高度，实时计算有效视口高度，iOS 15.4及以上版本原生支持，可搭配vh做降级兼容：

.container { 
  display: flex; 
  height: 100vh; /* 低版本降级兼容 */
  height: 100dvh; 
} 
.input-bottom { 
  align-self: flex-end; 
}

方案2：输入框聚焦时自动滚动到可视区域

给输入框绑定聚焦事件，触发时强制浏览器将输入框滚动到可视范围内，兼容所有iOS 15版本：

const input = document.querySelector('.input-bottom input')
input.addEventListener('focus', () => {
  // block: end 表示将元素对齐到可视区域底部
  input.scrollIntoView({ behavior: 'smooth', block: 'end' })
})

方案3：监听视觉视口变化手动适配

如果需要兼容iOS 15.4以下版本，可监听系统视觉视口的变化，动态给容器添加底部内边距避开键盘区域：

if (window.visualViewport) {
  window.visualViewport.addEventListener('resize', () => {
    // 计算被键盘和地址栏遮挡的高度
    const coverHeight = window.innerHeight - window.visualViewport.height
    document.querySelector('.container').style.paddingBottom = `${coverHeight}px`
  })
}