移动端导航栏无法占满全屏宽度问题求助

问题根源 #

你遇到的问题核心有两点：

1. 缺少移动端viewport配置：移动端浏览器默认会缩放页面，没有正确的viewport元标签会导致布局计算偏差，使得导航栏无法适配设备宽度。
2. 100vw引发的横向溢出：100vw包含了浏览器滚动条的宽度，在移动端会触发横向滚动，视觉上看起来导航栏没占满宽度；而下方元素的存在会触发页面滚动，进一步暴露这个问题。

修复步骤 #

1. 添加viewport元标签 #

在HTML的<head>中加入以下代码，确保移动端浏览器以设备原生宽度渲染页面：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 调整导航栏宽度设置 #

将nav的width: 100vw替换为width: 100%，同时确保父元素无额外边距干扰：

nav{
  background-color: #0b4e2d;
  font-size:18px;
  padding:6px;
  margin: 0;
  width: 100%; /* 替换100vw */
}

3. 修正html元素边距 #

你给html设置的margin: 0 auto会在内容不足时让页面居中，干扰全屏元素布局，改为：

body, html {
  margin: 0; /* 移除auto */
  padding: 0;
}

4. 优化列表边距（避免小屏溢出） #

将ul的margin-left:15px改为padding-left:15px，避免列表边距撑宽父容器：

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: white;
  padding-left: 15px; /* 替换margin-left */
  margin: 0; /* 清除默认margin */
  font-family: Arial, Helvetica, sans-serif;
}

完整修复代码 #

HTML #

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修复后的导航栏</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Dev Log</a></li>
      <li><a href="#">Credits</a></li>
    </ul>
  </nav>
  <!-- 页面其他内容 -->
  <div>下方示例内容</div>
</body>
</html>

CSS #

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #7AE7C7;
  text-align: center;
}

nav{
  background-color: #0b4e2d;
  font-size:18px;
  padding:6px;
  margin: 0;
  width: 100%;
}

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: white;
  padding-left: 15px;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

ul a {
  color: white;
  text-decoration: none;
}

ul a:hover {
  text-decoration: underline;
}

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