Chrome开发者工具移动模式下，屏幕<300px时Navbar宽度异常缩小求助

问题详情 #

在Chrome开发者工具的「切换设备工具栏」移动模式下，当屏幕尺寸缩小至300px以下时，navbar宽度大幅缩小，内部链接无法完全显示。尝试过给navbar和body设置width:100vw或width:100%，问题依旧；设置user-scalable=no会引发navbar其他异常。

核心原因 #

• 100vw是视口宽度，不包含页面横向滚动条的宽度，当内容溢出时，navbar无法跟随页面实际宽度扩展。
• 未设置navbar的最小宽度，屏幕过小时navbar被过度挤压。
• 页面默认的横向滚动处理逻辑导致navbar和内容区域宽度不一致。

修复方案 #

步骤1：调整Navbar的宽度配置 #

移除width:100vw，改用width:100%让navbar自适应父容器，同时添加min-width确保它不会收缩到无法容纳链接的尺寸，再用flex-wrap: nowrap防止链接换行。

步骤2：允许页面横向滚动 #

给body添加overflow-x: auto，当屏幕宽度小于内容最小宽度时，页面会出现横向滚动条，保证所有内容都能被查看。

步骤3：保留正确的Viewport设置 #

不要禁用用户缩放，保持原始的viewport配置即可，避免影响移动端用户体验。

修改后的代码 #

CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Kanit", sans-serif;
  font-weight: 400;
}

.body-trade-page {
  height: 100vh;
  background: linear-gradient(139.73deg, rgb(229, 253, 255) 0%, rgb(243, 239, 255) 100%) no-repeat fixed;
  /* 允许页面横向滚动 */
  overflow-x: auto;
}

.trade-navbar {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  /* 设置最小宽度，确保能容纳所有链接 */
  min-width: 300px;
  height: 42px;
  align-items: center;
  padding-left: 12px;
  background-color: rgb(255, 255, 255);
  /* 防止链接换行 */
  flex-wrap: nowrap;
}

.trade-navbar div>a {
  display: flex;
  color: rgb(122, 110, 170);
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  opacity: 1;
  padding: 10px 10px;
  /* 禁止链接文本换行 */
  white-space: nowrap;
}

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>document</title>
</head>

<body class="body-trade-page">
  <!--menu-->
  <nav class="trade-navbar">
    <div class="trade-item">
      <div class="trade-link"><a class="link-highlighted" href="/swap">Swap</a></div>
    </div>
    <div class="trade-item">
      <div class="trade-link"><a href="/limit">Limit</a></div>
    </div>
    <div class="trade-item">
      <div class="trade-link"><a href="/liquidity">Liquidity</a></div>
    </div>
    <div class="trade-item">
      <div class="trade-link"><a href="/perpetual">Perpetual</a></div>
    </div>
  </nav>
</body>

</html>

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