vw 和 vh 似乎无法在 google chrome 上正常工作

Question

我正在尝试创建一个主体填充整个视口的移动站点。 我在样式表中写了以下内容

html, body {
  width: 100vw;
  height: 100vh;

  margin: 0;
  padding: 0;
  overflow: hidden;
}

然而，当使用 chrome 开发工具的响应模式时，css 开始做一些奇怪的事情。

screenshot

这仅仅是一个浏览器错误，还是我遗漏了什么？

Answer 1

移动浏览器执行一些自动调整大小和其他一些操作。您可以尝试在页面的 head 元素中添加以下行：

<meta name='viewport' content='width=device-width'>

此行在视口上设置了一个设置，即视口的宽度应始终等于设备宽度。