vw 和 vh 在谷歌浏览器上似乎无法正常工作

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'>

此行设置视口的设置，即视口的宽度应始终等于设备宽度。