响应式网页跨设备适配异常 白边/移动端自动缩放问题咨询

问题核心根源 #

你遇到的适配问题主要来自4个代码错误：

• 初始代码大量使用固定像素宽度（比如.container写死1906px），小于该宽度的设备会出现横向溢出、白边
• 修改后的HTML结构错误：将.container放在了position:fixed的.navbar内部，导致首屏图跟着导航固定在顶部，遮挡后续内容
• 单位漏写：修改后的CSS中max-width: 1906未加px单位，规则不生效
• 缺少响应式适配规则：图片未做自适应设置、flex容器未加换行规则，小屏内容溢出

修复步骤 #

1. 修正HTML结构 #

把.container从.navbar内部移出，和导航栏同级，避免被固定定位影响，同时还原safari-tours区域的代码。

2. 修正CSS适配规则 #

• 所有容器改用width: 100% + max-width限制最大宽度，移除固定宽度设置
• 全局给图片加响应式规则：img {max-width:100%;height:auto;}，避免图片溢出容器
• 给body加顶部内边距，避免固定导航栏遮挡页面内容
• 给.banner的flex布局加换行规则，小屏下卡片自动换行

3. 修正媒体查询逻辑 #

移除媒体查询中固定宽度设置，保留布局调整逻辑即可

完整修正后代码 #

CSS代码 #

* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 全局图片响应式规则 */
img {
  max-width: 100%;
  height: auto;
}
body {
  background: #f7f7f7;
  color: #545454;
  /* 避免固定导航遮挡内容 */
  padding-top: 150px;
}

/* NAVIGATION */
.navbar {
  width: 100%;
  height: 150px;
  background: black;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 25px;
  z-index: 999;
}
.navbar .inner_navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.navbar .hamburger {
  display: none;
}
.navbar .menu ul {
  display: flex;
}
.navbar .menu ul li a {
  display: block;
  width: 120px;
  margin-right: 10px;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  padding: 10px;
  border-radius: 25px;
  letter-spacing: 2px;
  transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a {
  margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active {
  background: #5db485;
}
.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.promo {
  width: 100%;
  display: block;
}

/* Safari Tours*/
.safari-tours {
  background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
  width: 100%;
  padding-bottom: 30px;
}
.safari-title {
  text-align: center;
  padding: 30px 15px;
  font-size: 50px;
  color: #fff;
}
.banner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2%;
  padding: 0 15px;
}
.safari {
  flex: 0 1 500px;
  margin-bottom: 20px;
}

/*Tablet*/
@media (max-width: 992px) {
  body {
    padding-top: 218px;
  }
  .navbar {
    height: 218px;
    padding: 12px;
  }
  .navbar .inner_navbar {
    flex-direction: column;
  }
  .safari-title {
    font-size: 36px;
  }
}

/*Mobile*/
@media (max-width: 728px) {
  body {
    padding-top: 150px;
  }
  .navbar {
    height: 150px;
  }
  .navbar .inner_navbar {
    flex-direction: row;
  }
  .navbar .menu ul {
    position: absolute;
    top: 150px;
    left: 0;
    display: block;
    background: orangered;
    width: 100%;
  }
  .navbar .menu ul li {
    padding: 10px;
  }
  .navbar .menu ul li a {
    width: 100%;
    padding: 12px;
  }
  .navbar .hamburger {
    display: block;
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .navbar .menu {
    display: none;
  }
  .navbar .menu.activate {
    display: block;
  }
  .safari-title {
    font-size: 28px;
  }
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="wrapper">
      <div class="navbar">
        <div class="inner_navbar">
          <div class="logo">
            <a href="#"><img src="/images/Final Logo.png" style="width: 150px;" alt="logo"></a>
          </div>
          <div class="menu">
            <ul>
              <li><a href="#" class="active">Home</a></li>
              <li><a href="#">Desert Safari</a></li>
              <li><a href="#">Tours</a></li>
              <li><a href="#">Activities</a></li>
              <li><a href="#">Contact-Us</a></li>
            </ul>
          </div>
        </div>
        <div class="hamburger">
          <img src="/images/menu-btn.png" style="width: 40px;" alt="菜单按钮">
        </div>
      </div>
      <div class="container">
        <img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="沙漠露营宣传">
      </div>
    </div>
  </header>

  <section>
    <div class="safari-tours">
      <h1 class="safari-title">SAFARI TOURS</h1>
      <div class="banner">
        <div class="safari">
          <img src="https://i.imgur.com/9QH8NFE.jpeg" alt="Morning Safari" />
        </div>
        <div class="safari">
          <a href="https://bigdunestours.com/desert-safari" target="_top">
            <img src="https://i.imgur.com/2E9ytwc.jpeg" alt="Evening Safari" />
          </a>
        </div>
      </div>
    </div>
  </section>
  <script>
    var hamburger = document.querySelector(".hamburger");
    var menu = document.querySelector(".menu");

    hamburger.addEventListener("click", function() {
      menu.classList.toggle("activate");
    })
  </script>
</body>
</html>

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