NextJS+Material-UI项目页面桌面端宽度正常移动端占比异常

排查&修复步骤 #

• 步骤1：补全viewport元标签配置
  你当前的viewport配置缺失部分属性，部分移动端浏览器默认缩放行为会导致页面宽度计算异常，替换为如下配置：

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

• 步骤2：补充html、body样式限制
  在global.css中给html和body新增横向溢出限制、明确宽度配置，避免子元素溢出撑宽父容器：

html,
body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    width: 100%;
    overflow-x: hidden; /* 禁止横向溢出 */
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
}

• 步骤3：排查子元素溢出问题
  绝大多数此类问题都是由页面内子元素宽度超出视口导致的：
  1. 打开浏览器开发者工具，逐层检查页面元素，找到宽度大于当前移动端视口的元素
  2. 重点排查写死固定宽度（如width: 400px）、设置了过大的左右margin/padding、设置了white-space: nowrap未做换行处理的元素
  3. 如果你使用了Material-UI的Container组件，确认是否显式设置了maxWidth={false}关闭默认的最大宽度限制；如果使用了Grid组件，检查spacing配置是否过大导致横向溢出，可给外层Grid添加disableGutters属性取消默认边距
• 步骤4：验证效果
  修改完成后刷新移动端页面，确认body宽度可占满视口，参考异常表现如下图：
  

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