React移动端页面右侧出现空白区域的问题求助

以下是针对你遇到的移动端右侧空白问题的具体排查和解决步骤：

• 检查元素固定宽度溢出：打开浏览器开发者工具（F12）切换到移动端模式，逐个检查Property、Award、feature及Hero组件内的元素，看是否有设置固定宽度（如width: 1200px）的元素超出视口。如果有，将固定宽度改为max-width: 100%，确保元素不会超出当前视口宽度。

• 统一盒模型避免padding/margin溢出：很多时候元素设置width: 100%后，加上左右padding或margin会导致总宽度超过视口。可以在全局CSS中添加：

  * {
    box-sizing: border-box;
  }
  

  让padding和margin包含在元素宽度内，避免溢出。

• 排查绝对定位元素：如果Hero组件里有绝对定位的装饰元素，检查是否设置了right: -XXpx或宽度超出视口的情况。针对移动端，可通过媒体查询调整这类元素的位置或尺寸，比如：

  @media (max-width: 768px) {
    .absolute-decoration {
      right: 0;
      width: 100%;
    }
  }
  

• 定位溢出源头：在浏览器控制台执行以下代码，对比视口宽度和页面实际滚动宽度：

  console.log('视口宽度:', document.documentElement.clientWidth);
  console.log('页面滚动宽度:', document.documentElement.scrollWidth);
  

  如果滚动宽度大于视口宽度，说明存在溢出元素。通过开发者工具的“Elements”面板，从<body>开始逐个折叠子元素，找到折叠后滚动条消失的元素，针对性修复。

• 适配移动端媒体查询：检查Hero组件和各模块的移动端CSS规则，确保背景图使用background-size: cover或contain，避免拉伸溢出；同时清除浮动或使用flex/grid布局，防止容器高度塌陷引发的间接宽度问题。

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