时间戳

首页 > 解决方案 > Chrome Devtools 移动响应视图显示错误的大小

html - Chrome Devtools 移动响应视图显示错误的大小

问题描述

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

我得到了一个非常简单的页面，并希望一个元素是全宽的（width: 100vw）。我注意到在小于 300 像素左右的屏幕上，它变得更小并且不是实际的全宽。

没有在我所有的 html 之上插入一个完整的新 div，给它一个background: black;withheight: 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>

标签： htmlcssgoogle-chrome

解决方案

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

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

推荐阅读