移动端虚拟键盘弹出时100vh布局的CSS Grid错乱问题求助

问题背景 #

开发全屏无滚动Web应用时采用100vh布局，桌面端表现正常，但在移动端/平板端点击输入框弹出虚拟键盘后，布局出现错乱。此前尝试通过JavaScript为页面硬加250px高度的方案效果不佳，需要更可靠的CSS或JavaScript解决方案。

解决方案 #

方案一：使用动态视口单位dvh（推荐） #

现代浏览器支持动态视口单位dvh，它会根据当前实际可视高度（包括虚拟键盘弹出后的高度）自动调整，完美替代传统vh在移动端的缺陷。

实现代码

/* 全局基础样式 */
html, body, #root {
  height: 100dvh;
  min-height: 100dvh;
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

说明

• dvh会实时响应虚拟键盘的弹出/收起，自动更新视口高度，无需额外JavaScript处理。
• 兼容性：目前主流移动端浏览器（Chrome、Safari、Firefox移动端）均已支持，若需兼容旧版浏览器可搭配方案二做降级处理。

方案二：JavaScript动态监听调整高度 #

如果需要兼容不支持dvh的旧浏览器，可通过监听输入框状态和窗口resize事件，动态调整根元素高度。

实现代码

const root = document.getElementById('root');
// 保存初始高度设置
const originalHeight = root.style.height || '100vh';

// 调整布局适配键盘
function adjustLayout() {
  // 虚拟键盘弹出时，window.innerHeight会缩小，直接取当前可视高度
  root.style.height = `${window.innerHeight}px`;
}

// 恢复初始布局
function resetLayout() {
  root.style.height = originalHeight;
}

// 监听所有输入框的聚焦/失焦事件
document.querySelectorAll('input, textarea').forEach(input => {
  input.addEventListener('focus', adjustLayout);
  input.addEventListener('blur', resetLayout);
});

// 监听窗口resize（键盘弹出/收起会触发resize）
window.addEventListener('resize', () => {
  const isFocused = ['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName);
  isFocused ? adjustLayout() : resetLayout();
});

优化点（针对你之前的代码问题）

• 避免硬编码250px：不同设备虚拟键盘高度差异大，直接使用window.innerHeight获取实时可视高度更准确。
• 简化设备判断：无需通过userAgent判断平台，通过输入框状态和resize事件即可覆盖所有移动端场景。
• 移除不必要的touchmove阻止：除非明确需要禁止所有触摸滚动，否则不要全局阻止，避免影响输入框的正常交互。
• 避免给html加fixed定位：该定位可能导致布局偏移，直接调整根元素#root的高度即可。

额外注意事项 #

• 确保输入框在键盘弹出后处于可视区域：若布局中输入框位置靠下，可在输入框聚焦时，通过scrollIntoView()方法自动滚动到可视位置，示例：

input.addEventListener('focus', () => {
  adjustLayout();
  input.scrollIntoView({ behavior: 'smooth', block: 'center' });
});

• 测试多设备：不同品牌的移动端浏览器对虚拟键盘的处理略有差异，需在多设备上验证效果。

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