移动端网页横向滚动与宽度适配问题求助

问题根源分析 #

你的代码存在几个核心问题导致移动端横向滚动和缩放空白：

1. 网格区域命名不匹配：CSS grid-template-areas 定义的是 box1-box7，但每个盒子的 grid-area 写的是 item-1-item-7，导致网格布局错乱，容器溢出视口。
2. 固定高度限制：.box3 到 .box7 设置了固定 height，移动端屏幕高度不足时，布局会被强行拉伸导致横向溢出。
3. 图片未全局响应式：部分盒子内的图片未设置 max-width:100%，超出容器宽度触发横向滚动。
4. GSAP 触发器错误：.box4 的 ScrollTrigger 目标写为 .box4 .img，但 HTML 中无该类名，导致动画计算异常，产生额外横向空间。

具体修复步骤 #

1. 修正网格区域映射
   将每个盒子的 grid-area 属性值改为与 grid-template-areas 一致的名称（box1 到 box7）。

2. 移除固定高度，改用自适应高度
   删除 .box3 到 .box7 的固定 height 设置，或替换为 min-height，让网格行高根据内容自动调整。

3. 全局设置图片响应式
   添加全局图片样式，确保所有图片不会超出容器宽度：

   img {
     max-width: 100%;
     height: auto;
   }
   

4. 修复 GSAP 触发器错误
   将 .box4 的 ScrollTrigger 目标修正为 .box4 img，匹配 HTML 结构。

5. 加强视口与溢出控制
   更新 meta viewport 标签限制缩放行为；同时给 html 和 body 都添加 overflow-x:hidden：

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

   html, body {
     overflow-x: hidden;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   

6. 调整容器高度
   将 .main-container 的 height:97vh 改为 min-height:100vh，避免高度限制导致布局挤压溢出。

修改后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
  <title>Responsive CSS Grids</title>
  <link rel="stylesheet" href="index.css" />
  <link rel="stylesheet" href="index-dark.css" />
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="main-container">
    <div class="item box1"><h1>To Test this Site...</h1></div>
    <div class="item box2"><h2>just slide down...</h2></div>
    <div class="item box3">
      <img src="scapiafront.png" alt="cardfrontpic" />
    </div>
    <div class="item box4">
      <img src="scapiaback.png" alt="cardbackpic" />
    </div>
    <div class="item box5"><img src="scapiacard.png" alt="cardpic" /></div>
    <div class="item box6"><img src="scapia.png" alt="cardlogopic" /></div>
    <div class="item box7"><img src="scapiafont.png" alt="fontpic" /></div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script>
  <script src="index.js"></script>
</body>
</html>

CSS

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.main-container {
  display: grid;
  grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  min-height: 100vh;
  grid-template-areas:
    "box1 box1 box1 box1"
    "box2 box3 box3 box3"
    "box2 box4 box5 box6"
    "box2 box7 box7 box7";
  gap: 0.2rem;
  padding: 0.2rem;
}

.item {
  border-radius: 10px;
}

.box1 {
  background-color: violet;
  grid-area: box1;
  min-height: 50px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.box2 {
  background-color: indigo;
  grid-area: box2;
  min-height: 50px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: azure;
}

.box3 {
  background-color: blue;
  grid-area: box3;
  min-height: 50px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.box4 {
  background-color: green;
  grid-area: box4;
  min-height: 50px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.box5 {
  background-color: yellow;
  grid-area: box5;
  min-height: 50px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.box6 {
  background-color: orange;
  grid-area: box6;
  min-height: 50px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.box6 img {
  max-width: 300px;
}

.box7 {
  background-color: red;
  grid-area: box7;
  min-height: 50px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.box7 img {
  max-width: 300px;
}

@media screen and (max-width: 500px) {
  .main-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "box1"
      "box2"
      "box3"
      "box4"
      "box5"
      "box6"
      "box7";
  }
}

JS

const darkThemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
const toggleTheme = () => {
  const themeStylesheet = document.querySelector('link[href="index-dark.css"]');
  themeStylesheet.disabled = !darkThemeQuery.matches;
};

darkThemeQuery.addEventListener("change", toggleTheme);
toggleTheme();

gsap.registerPlugin(ScrollTrigger);

gsap.from(".box3", { opacity: 0, y: 100, delay: 1, duration: 1 });

gsap.from(".box4 img", {
  opacity: 0,
  x: 300,
  duration: 3,
  scrollTrigger: {
    trigger: ".box4 img",
    start: "30% 20%",
    end: "top 80%",
    scrub: 1,
  },
});

gsap.from(".box5 img", {
  opacity: 0,
  x: -300,
  duration: 3,
  scrollTrigger: {
    trigger: ".box5 img",
  },
});

gsap.from(".box6 img", {
  opacity: 0,
  x: 300,
  duration: 3,
  scrollTrigger: {
    trigger: ".box6 img",
  },
});

gsap.from(".box7 img", {
  opacity: 0,
  x: -300,
  duration: 3,
  scrollTrigger: {
    trigger: ".box7 img",
  },
});

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