响应式导航栏media queries在页面内容较多时触发阈值异常

问题描述 #

我正在开发响应式导航栏，为此针对屏幕宽度不超过600px的场景编写了媒体查询规则，对应代码如下：

body {
  margin: 0;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
  background-color: #111;
}

ul.topnav li a.active {
  background-color: #04aa6d;
}

ul.topnav li.right {
  float: right;
}

.content {
  padding: 0px 16px;
  text-align: justify;
}

@media screen and (max-width: 600px) {
  ul.topnav li.right,
  ul.topnav li {
    float: none;
  }
}

<ul class="topnav">
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#faq" class="right">FAQ</a></li>
</ul>
<div class="content">
  <h2>响应式顶部导航示例</h2>
  <p>
    这个示例使用媒体查询，在屏幕尺寸为600px及以下时将顶部导航改为垂直排列。
  </p>
  <p>
    后续的CSS教程会详细讲解媒体查询和响应式网页设计的相关内容。
  </p>
  <h4>调整浏览器窗口大小即可看到效果。</h4>
</div>

当div元素中仅放置上述少量内容时，媒体查询运行正常，屏幕宽度为600px时导航栏会如期从横向排布切换为纵向排布。但当我放入大量内容（比如1000字的Lorem ipsum文本）时，媒体查询直到屏幕宽度降至583px才会触发。

当div包含1000字等大量内容时，导航栏未在600px断点处切换布局
屏幕宽度为583px时导航栏才切换布局

烦请帮忙排查问题出在哪里。

问题排查与解决方案 #

根因

断点偏移是桌面端浏览器垂直滚动条占用视口宽度导致的：

• 内容较少时页面高度未超出视口，无垂直滚动条，媒体查询判断的布局宽度和窗口显示宽度完全一致，600px断点触发正常。
• 内容较多时页面高度超出视口，浏览器默认显示的垂直滚动条会占用约17px的视口宽度。媒体查询的max-width匹配的是扣除滚动条后的内容区域宽度，所以当窗口显示宽度为600px时，实际内容区域宽度只有583px，和实际触发断点的数值完全匹配。

修复方案

可任选一种方案解决：

• 方案1：给html标签添加scrollbar-gutter属性，提前为滚动条预留位置，避免内容长度变化导致的宽度跳动，断点会按预期触发：

html {
  scrollbar-gutter: stable;
}

• 方案2：强制始终显示垂直滚动条，统一所有场景下的宽度计算逻辑：

body {
  overflow-y: scroll;
}

• 方案3：如果需要兼容旧浏览器，可以直接将断点调整为617px（600px+常规滚动条宽度17px），适配滚动条占用的宽度。

额外提醒：请确保HTML的<head>中添加了正确的viewport元标签，避免移动端媒体查询出现异常：

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

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