React JS移动端浏览器软键盘弹出时UI缩小问题求助

我之前在好几个React移动端项目里踩过这个坑！大多是浏览器视口在软键盘弹出时的默认行为搞的鬼，下面是我亲测有效的几种解决办法：

1. 优化Viewport Meta标签 #

这是最基础也最有效的一步，默认的viewport设置可能会让浏览器在键盘弹出时自动缩放页面。把你的meta标签改成下面这样：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, shrink-to-fit=no, maximum-scale=1.0, user-scalable=no">

• shrink-to-fit=no 强制浏览器不要自动缩放适应内容
• maximum-scale=1.0 和 user-scalable=no 直接禁用用户缩放（如果你的项目不需要缩放功能的话，注意这可能影响无障碍体验，按需使用）
• viewport-fit=cover 适配刘海屏等异形屏，同时也能减少视口异常缩放的概率

2. 监听窗口 resize 事件动态调整样式 #

软键盘弹出时，窗口的innerHeight会明显变小，我们可以利用这个特性动态修改body或根容器的样式，避免页面缩放：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleKeyboardResize = () => {
      // 判断软键盘是否弹出：窗口高度小于屏幕物理高度
      const isKeyboardOpen = window.innerHeight < window.screen.height;
      
      if (isKeyboardOpen) {
        // 固定body高度为当前窗口高度，防止滚动导致的缩放
        document.body.style.height = `${window.innerHeight}px`;
        document.body.style.overflow = 'hidden';
      } else {
        // 恢复默认样式
        document.body.style.height = '100vh';
        document.body.style.overflow = 'auto';
      }
    };

    window.addEventListener('resize', handleKeyboardResize);
    // 组件卸载时移除监听
    return () => window.removeEventListener('resize', handleKeyboardResize);
  }, []);

  return <div className="app-container">你的应用内容</div>;
}

3. 针对iOS Safari的特殊处理 #

iOS Safari的视口行为经常有点“特立独行”，100vh在键盘弹出时会被拉伸，我们可以用-webkit-fill-available替代：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
}

.app-container {
  /* 优先使用webkit的填充可用空间属性，兼容iOS */
  min-height: -webkit-fill-available;
  min-height: 100vh;
}

这样设置后，根容器的高度会自适应当前窗口，不会因为键盘弹出而被压缩导致UI缩放。

4. 检查第三方组件的默认行为 #

如果上面的方法都没用，看看你用的表单组件（比如antd-mobile、mui等）有没有自带的缩放或自适应逻辑，有些组件会默认触发浏览器缩放，需要在组件配置里禁用相关选项。

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