chrome 105+ 和 edge 111+ 原生支持 virtualkeyboard api，但需先设置 ，再通过 navigator.virtualkeyboard.addeventlistener("geometrychange", ...) 监听键盘显隐；ios 不支持该 api，须降级为 focus/blur + innerheight 变化检测。
Chrome 105+ 和 Edge 111+ 已原生支持 VirtualKeyboard API，但默认不启用；不手动配置或监听，input 聚焦时它不会自动缩放页面、也不会触发事件——这不是“兼容性问题”，而是“未激活行为”。
怎么启用 VirtualKeyboard API 并监听显示/隐藏状态
该 API 需显式调用 navigator.virtualKeyboard.show() 或依赖用户交互（如点击 input）触发，但关键在于：必须先设置 virtualkeyboardpolicy meta 标签，否则浏览器会忽略所有相关逻辑。
-
<meta name="viewport" content="height=device-height, virtualkeyboardpolicy=auto">是必需前置项；virtualkeyboardpolicy只接受auto或manual，设为auto才允许系统键盘弹出时触发geometrychange事件 - 监听需用
addEventListener("geometrychange", ...)，不是resize；resize在虚拟键盘展开时通常不触发（尤其在 Chrome Android 上） -
virtualKeyboard是navigator的可选属性，访问前必须判空：if ("virtualKeyboard" in navigator)
if ("virtualKeyboard" in navigator) {
navigator.virtualKeyboard.addEventListener("geometrychange", (e) => {
const { height } = e.target.boundingRect;
document.body.style.paddingBottom = `${height}px`;
});
}
为什么 input 聚焦后页面没上推、键盘遮挡输入框
这是最常见的表现，本质是 viewport 缩放策略和滚动锚点失控。即使启用了 API，若未干预 scroll 行为，浏览器仍按默认规则处理焦点元素定位。
- Android Chrome 默认将聚焦
input滚到视口顶部，但虚拟键盘弹出后视口高度变小，顶部位置可能已超出可视区 → 需手动scrollIntoView({ block: "nearest" }) - 不要依赖
window.scrollTo()或element.scrollIntoView(true)（true强制置顶，反而加重遮挡） - 建议在
focus事件中延迟执行滚动（setTimeout(..., 100)），避开键盘动画帧冲突 - 部分低端 Android 机型（如三星旧款）不支持
geometrychange，需 fallback 到resize+document.activeElement位置检测
VirtualKeyboard API 在 iOS 上完全不可用
iOS Safari 至今（2026 年）未实现 navigator.virtualKeyboard，连 in 检测都会返回 false。别尝试 polyfill，它底层依赖系统级输入法接口，WebKit 明确拒绝暴露。
- 对 iOS，唯一可靠路径是监听
focus/blur+resize，结合window.innerHeight变化粗略判断键盘状态（注意：Safari 在键盘弹出时innerHeight会缩小约 200–300px，收起后恢复） - 避免用
visualViewport.height做 iOS 判断——它在键盘弹出时变化不稳定，且 iOS 不触发visualviewport事件 - 若项目需强一致性体验（如表单页），建议对 iOS 单独加一层“软键盘提示层”，引导用户手动拖动页面，而非强行滚动
真正难的不是监听键盘，而是区分「键盘弹出」和「页面缩放」「横竖屏切换」「iframe resize」——所有这些都会影响 innerHeight 或触发 resize。实际项目里，geometrychange 事件的 boundingRect.height 是目前唯一能稳定代表键盘高度的信号，但只存在于 Chromium 内核。iOS 用户永远看不到这个值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
