移动端<nav>无法占满屏幕宽度问题求助

问题描述 #

用Chrome DevTools调试移动端页面时，发现<nav>导航栏没法占满100%屏幕宽度，但大屏显示正常。已经添加了正确的viewport meta标签，问题依然存在：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

相关HTML代码：

<nav>
    <ul>
      <li><a href="https://grocerystorerblx.github.io/">Home</a></li>
      <!-- <li><a href="">Fan Art</a></li> -->
      <li><a href="https://grocerystorerblx.github.io/devlog">Dev Log</a></li>
      <li><a href="https://grocerystorerblx.github.io/credits">Credits</a></li>
      
    </ul>
  </nav>

  <iframe width="720" height="405" src="https://www.youtube.com/embed/OfDQD1vwsc4?si=hYtyXVJaSg7q_fpz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<h2>Countdown to Grocery Store 2's Release Date</h2>
<script src="https://grocerystorerblx.github.io/script.js"></script>
<h3 id="countdown"></h3>

相关CSS代码：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  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;
  position: relative;
  color: white;
  margin-left: 15px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

问题原因 #

导航栏本身设置了width:100%，但页面出现了横向滚动条——问题出在那个固定宽度720px的iframe上。当移动端视口宽度小于720px时，iframe会超出视口范围，迫使页面出现横向滚动，此时width:100%的nav会跟着页面内容宽度走，而非视口宽度，看起来就像没占满屏幕。

解决方案 #

方案1：给iframe添加响应式样式（优先推荐） #

修改iframe的CSS，让它自适应父容器宽度，同时保持原有的宽高比例：

iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* 对应原720x405的比例 */
}

这样iframe会自动缩放适配视口宽度，不会超出页面范围，页面也就不会出现横向滚动，nav的width:100%就能正确匹配视口宽度。

方案2：给body添加横向溢出隐藏（不推荐） #

如果不想修改iframe样式，也可以强制页面不显示横向滚动条：

body {
  overflow-x: hidden;
}

但这种方式只是隐藏了滚动条，iframe实际还是超出了视口，可能导致部分内容被截断，所以优先用方案1。

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