如何在React JS中修复移动端网站的高度与宽度问题？

核心问题原因 #

1. 强制最小宽度引发横向溢出：.App 类设置了 min-width: 768px，移动端视口宽度远小于该值，导致页面横向超出视口范围，浏览器滚动计算逻辑异常，间接触发纵向出现无内容的空白滚动区域。
2. 高度属性冲突：.App 同时设置 height: 100% 和 min-height: 100vh，在未给 html/body 设置高度的情况下，height:100% 无法正确继承父元素高度，结合 flex 布局特性，容易出现容器高度计算错误，造成“高度翻倍”的视觉效果。
3. 媒体查询逻辑缺失移动端适配：当前媒体查询仅针对宽度≥768px的设备生效，移动端（<768px）无针对性布局规则，完全依赖默认样式，适配性不足。

具体修复步骤 #

1. 修正全局与 .App 基础样式 #

移除强制最小宽度，确保全局元素高度正确继承，避免横向溢出：

/* 全局基础样式重置 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* 禁止横向滚动 */
}

.App {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background-color: #cbe6ef;
  flex-direction: column;
  /* 移除 min-width:768px，消除移动端横向溢出根源 */
}

2. 调整媒体查询适配逻辑 #

针对不同屏幕宽度设置对应布局，覆盖移动端到桌面端的全场景：

/* 移动端专属适配（屏幕宽度<768px） */
@media only screen and (max-width : 767px) {
  /* 可根据需求添加移动端样式，如内边距、字体缩放等 */
}

/* 平板及以上屏幕（≥768px） */
@media only screen and (min-width : 768px) {
  .App {
    width: 50%;
    height: 50vh;
    margin: 0 auto; /* 容器居中显示 */
  }
}

/* 桌面端（≥992px） */
@media only screen and (min-width : 992px) {
  .App {
    width: 100%;
    height: 100vh; /* 恢复全屏高度，可根据需求调整 */
  }
}

3. 拆分背景图与布局容器 #

将背景图样式从 .App 容器中拆分，避免布局样式和背景样式冲突：

const Home = () => {
  const backgroundStyle = {
    backgroundImage: "url(/background.png)",
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center center", /* 确保背景图居中适配 */
    width: "100%",
    minHeight: "100vh"
  };

  const [cookies, setCookie] = useCookies(['viewed_cookie_policy']);
  return (
    <div style={backgroundStyle}>
      <div className="App">
        <Header />
        <News />
        <Footer />
        {!cookies.viewed_cookie_policy ? <Consent /> : null}
      </div>
    </div>
  );
};

4. 优化子组件布局 #

检查 Header、News、Footer 等子组件的高度与边距设置，建议使用 flex 布局的 flex-grow 属性分配空间，避免固定高度限制：

/* 示例：让News组件自动填充容器剩余空间 */
.News {
  flex-grow: 1;
}

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