React应用中虚拟键盘弹出时如何解决vh单位导致的元素样式收缩问题？

方案1：使用CSS动态视口单位dvh（成本最低） #

dvh是CSS规范新增的动态视口高度单位，计算时会自动排除虚拟键盘、移动端地址栏等临时占用的视口空间，不会随虚拟键盘弹出收缩，直接替换原有vh单位即可，搭配降级逻辑兼容旧浏览器：

.target-element {
  height: 100vh; /* 旧浏览器降级 */
  height: 100dvh;
}

方案2：JS固定初始视口高度（兼容性最好） #

在React应用初始化时一次性获取完整视口高度，写入CSS全局变量，后续所有高度计算都基于该变量，虚拟键盘弹出不会触发变量更新，完全避免变形，同时支持横竖屏切换适配：

1. 根组件写入高度初始化逻辑：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const updateViewportHeight = () => {
      const vhUnit = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vhUnit}px`);
    };
    // 初始化赋值
    updateViewportHeight();
    // 仅横竖屏切换等真实窗口尺寸变化时更新高度
    window.addEventListener('resize', updateViewportHeight);
    return () => window.removeEventListener('resize', updateViewportHeight);
  }, []);

  return <div className="app">{/* 应用业务内容 */}</div>
}

2. 替换所有CSS中的vh单位为自定义变量：

/* 原写法：height: 50vh; 替换为以下写法 */
.target-element {
  height: calc(var(--vh, 1vh) * 50);
}

方案3：输入聚焦场景专项处理 #

如果仅在输入框唤起键盘时出现变形，可通过聚焦/失焦事件临时固定根容器高度：

.app--fixed {
  height: 100vh;
  overflow-y: auto;
}

const FormInput = () => {
  const handleFocus = () => document.querySelector('.app').classList.add('app--fixed');
  const handleBlur = () => document.querySelector('.app').classList.remove('app--fixed');

  return <input onFocus={handleFocus} onBlur={handleBlur} />
}

额外说明 #

• 百分比单位%不需要调整，只要父元素高度不随虚拟键盘变化，基于%的元素尺寸不会出现异常
• 以上方案均保留了动态适配不同分辨率屏幕的能力，不需要放弃相对单位的使用

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