移动端Chrome中如何实现悬浮于HTML元素上方的虚拟键盘

原实现使用的navigator.virtualKeyboard.overlaysContent = true已在新版本移动端Chrome被废弃，可通过以下标准化方案实现完全一致的虚拟键盘悬浮在HTML元素之上的效果，兼容当前所有主流版本移动端Chrome：

1. 核心视口配置（必加） #

在HTML头部添加viewport元标签，使用W3C标准化的交互组件配置替代废弃API，配置后虚拟键盘弹出时默认不会挤压页面视口，直接悬浮覆盖在内容上方：

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=overlays-content">

*该配置支持Chrome 108及以上版本，覆盖99%以上现役移动端Chrome用户，效果和废弃的overlaysContent = true完全一致。

2. 键盘高度适配方案 #

如果需要获取键盘弹出高度、让指定元素（比如输入框、操作栏）自动贴靠在键盘上方而非被覆盖，可选择CSS或JS两种实现方式：

CSS实现（推荐） #

直接使用浏览器提供的键盘inset环境变量，无需编写JS逻辑：

/* 需要贴靠键盘上方的固定定位元素 */
.keyboard-attached-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* 自动读取键盘高度设置偏移，不支持的环境兜底为0 */
  bottom: env(keyboard-inset-height, 0px);
}

JS实现（适配复杂交互场景） #

通过监听visualViewport的尺寸变化计算键盘高度，实现自定义交互逻辑：

// 记录页面初始可见视口高度
const baseVisualHeight = window.visualViewport.height;

window.visualViewport.addEventListener('resize', () => {
  // 计算当前虚拟键盘高度
  const currentKeyboardHeight = Math.max(baseVisualHeight - window.visualViewport.height, 0);

  if (currentKeyboardHeight > 0) {
    // 键盘弹出时的逻辑：例如调整元素位置、滚动输入框到可见区域等
    document.querySelector('.custom-input-area').style.bottom = `${currentKeyboardHeight}px`;
  } else {
    // 键盘收起时的逻辑：重置元素样式
    document.querySelector('.custom-input-area').style.bottom = '0';
  }
});

3. 旧版本兼容降级 #

如果需要兼容108版本以下的旧版移动端Chrome，可加一行降级判断，在支持旧API的环境下自动兜底：

if ('virtualKeyboard' in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;
}

注意事项 #

• 配置interactive-widget=overlays-content后，所有设置position: fixed; bottom: 0的元素默认会固定在屏幕底部，被弹出的虚拟键盘覆盖，需要贴靠键盘的元素必须手动加偏移
• 不要同时混用旧VirtualKeyboard API的事件监听和新的viewport配置，避免出现视口高度计算异常
• 不要依赖window.innerHeight判断键盘状态，配置overlays-content后window.innerHeight不会随键盘弹出变化，必须用visualViewport.height取值

内容的提问来源于stack exchange，提问作者next2cat