Chrome 开发工具视口宽度不同（调整窗口值与设备工具栏值）答案

【问题标题】：Chrome Dev Tools Viewport Width Different (Resizing Window Value vs Device Toolbar Value)Chrome 开发工具视口宽度不同（调整窗口值与设备工具栏值）
【发布时间】：2021-09-22 22:05:00
【问题描述】：

所以我遇到了一个奇怪的 Chrome 视口问题，我以前没有遇到过问题。

首先：我使用的是 Bootstrap 5，因此它是断点 - 为了突出我正在处理的网站的问题，我们将检查 992px 宽度的断点。使用这个 992px 值作为触发我的移动菜单的媒体查询，我在以下内容中设置了规则：
@media (max-width: 991.98px) {...}

查看 Chrome 的开发工具的设备工具栏，您可以看到视口正确显示在宽度小于 992 像素 (~991.98 像素) 处触发的移动菜单
Desktop view 992px
Mobile Menu View 991px

但是，当不使用设备工具栏而仅调整屏幕大小时，我发现在进行响应式编辑时更容易和我通常的工作流程，视口宽度似乎偏离了 15 像素。这意味着我的移动菜单断点（在调整视口宽度中）似乎是在 976 像素而不是 991 像素宽度处触发的 - 请参阅附图。我今天才注意到这一点，并且知道它曾经显示正确/相同的宽度值，就像使用设备工具栏时一样。我想知道我是否更改了某种我不知道的设置。注意：我的缩放值默认为 100%，我的 Chrome 版本是最新的官方构建版本 94.0.4606.54（官方构建）(x86_64)
Resizing Window Desktop View 977px
Resizing Window Mobile Menu View 976px

非常感谢任何帮助。谢谢。

【问题讨论】：

标签： google-chrome google-chrome-devtools media-queries

【解决方案1】：

我也有这个问题。我发现我的优势，firefox也有这个问题

https://imgur.com/IUyTpu6

以上链接是我使用 Edge 打开 bootstrap5 网站 https://getbootstrap.com/docs/5.1/examples/features/ 它的断点是 991px，但浏览器宽度为 976px 仍然没有变化

@media (min-width: 992px)
  .row-cols-lg-3>* {
     flex: 0 0 auto;
     width: 33.3333333333%;
}

它仍然受到影响

【讨论】：

【解决方案2】：

今天 11/24/21 的新 Chrome 更新已解决此问题版本 96.0.4664.55

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
至此，您是否有可以链接到的错误报告或 GitHub 问题或发行说明，以提供有关此修复的更多详细信息？这将使这个答案更有用。也就是说，提供日期和补丁号当然因其特殊性而受到赞赏。