Chrome Devtools 移动响应视图显示错误大小答案

【问题标题】：Chrome Devtools mobile repsonsive View shows wrong sizeChrome Devtools 移动响应视图显示错误大小
【发布时间】：2021-04-08 18:44:44
【问题描述】：

找不到任何关于此的信息，所以我在这里问这个：

我有一个非常简单的页面，并希望元素是全宽的 (width: 100vw)。我注意到，在小于 300 像素左右的小屏幕上，它变小了，并不是真正的全宽。

没有在我所有的 html 之上插入一个完整的新 div，给它一个 background: black; 和 height: 100vh; 和 width: 100vw;，它实际上不是全屏大小。

正如您在我的屏幕截图中看到的，设置的“显示尺寸”为 352 像素 x 778，元素应该为 352x778（屏幕尺寸如此精确），但您可以看到它更小。

这是什么原因造成的，我该如何解决？现在什么是正确的？我看到了什么或价值说了什么？很烦人。

如果需要：我在 macOS Big Sur 版本 11.2.3 (20D91) 上使用 chrome 89.0.4389.114

在插入代码时添加：
当我减少代码以在此处发布时，我发现包装器是问题所在。但我相信这个问题仍然有效。为什么没有与<header> 连接的包装器是视口的问题？

html,
body {
  margin: 0;
}

.wrapper {
  width: 380px;
  margin: 0 auto;
}

.header {
  background: black;
  width: 100vw;
  height: 100vh;
}

<html>

<head>
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="header">

  </div>

  <div class="wrapper">
    <div class="user">
      <h2>
        Lorem Ipsum,
        <br> Lorem Ipsum Dolor sit amet!
      </h2>
    </div>
  </div>
</body>

</html>

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

阅读更多关于使用桌面浏览器或移动浏览器在网页中缩放的信息

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

【讨论】：