Framer Motion动画引发移动端网站页面异常扩大问题求助

问题根因分析 #

你遇到的是移动端首屏加载时浏览器布局计算异常的问题，本质是首屏渲染完成后没有正确触发重排，动画相关的初始临时尺寸被浏览器保留为页面基准尺寸，后续元素回到正确位置后没有触发布局重计算导致的。悬停React DevTools时会自动触发全页重排，因此问题暂时消失。

解决方案 #

1. 补全正确的viewport元标签 #

在项目public/index.html的<head>标签内添加如下配置，确保移动端正确识别视口尺寸：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

如果已经有该标签，请检查是否存在拼写错误、属性配置错误的问题。

2. 全局增加横向溢出隐藏 #

在全局CSS文件中添加如下规则，避免临时溢出的元素撑宽页面：

html, body, #root {
  width: 100%;
  overflow-x: hidden;
}

如果使用Tailwind CSS，也可以直接给根元素添加w-full overflow-x-hidden类。

3. 修复framer-motion动画导致的布局计算异常 #

在根组件的useEffect中添加代码，主动触发一次resize事件强制浏览器重新计算布局：

import { useEffect } from 'react'

function App() {
  useEffect(() => {
    // 组件挂载后主动触发重排，修正初始布局错误
    window.dispatchEvent(new Event('resize'))
  }, [])

  // 其余代码
}

如果是特定动画元素导致的问题，也可以给对应的motion元素添加layout属性，让framer-motion自动处理布局重计算。

4. 验证修复效果 #

修改完成后在移动设备模拟器中切换到响应式模式，多次刷新页面验证问题是否消失，再用真实移动设备访问确认兼容。

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