React项目如何阻止移动端键盘弹出时调整视口大小及相关问题咨询

• 固定初始视口高度，避免软键盘弹起改变布局：在页面初始化时将视口高度存入自定义CSS变量，仅在屏幕方向旋转时更新高度，忽略软键盘触发的resize事件。

useEffect(() => {
  const setCustomVh = () => {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--custom-vh', `${vh}px`);
  };
  // 初始化设置高度
  setCustomVh();
  // 仅监听屏幕方向变更事件，不监听resize
  window.addEventListener('orientationchange', setCustomVh);
  return () => window.removeEventListener('orientationchange', setCustomVh);
}, []);

• 全局CSS中使用自定义变量替代原生vh单位：

html, body, #root, .page-container {
  height: calc(var(--custom-vh, 1vh) * 100);
  overflow: hidden;
}

• 如果业务逻辑中有依赖resize的回调，可以增加触发条件过滤：判断当前聚焦元素是否为输入框类元素，若是则跳过resize逻辑执行。

• 提前预加载动画依赖的所有图片资源，等资源加载完成后再启动动画：

// 图片预加载工具函数
const preloadImages = (imgUrlList) => {
  return Promise.all(imgUrlList.map(url => {
    return new Promise((resolve) => {
      const img = new Image();
      img.src = url;
      img.onload = resolve;
      img.onerror = resolve; // 加载失败也不阻塞动画执行
    });
  }));
};

// 登录组件内调用
useEffect(() => {
  const initAnimation = async () => {
    // 替换为动画用到的所有图片地址
    const animationImgs = ["/img/login-bg.webp", "/img/logo.png"];
    await preloadImages(animationImgs);
    // 资源加载完成后再添加动画类/修改动画状态
    setAnimationStart(true);
  };
  initAnimation();
}, []);

• 动画属性优化：所有过渡动画优先使用transform和opacity属性实现，这两个属性支持GPU加速，不会触发页面重排重绘，性能远高于修改width、top、margin等布局属性。
• 资源体积优化：将动画用到的图片转换为WebP格式并压缩，减少资源加载耗时，小尺寸图标可转为base64内嵌到代码中，避免额外请求开销。
• 给动画元素添加will-change: transform, opacity属性，提前告知浏览器该元素需要做动画优化，动画结束后移除该属性避免占用额外资源。

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