为什么 VW 不等于窗口的可视宽度？ [复制]

Question

据我所知，vh 和vw 使用了可视视口的高度和宽度——浏览器窗口的大小，然后除以 100。因此，如果您将元素定义为 100vw宽，它将始终跨越整个浏览器窗口，MDN 称之为可视视口。

在我的网站上工作时，我发现设置为 100vw 的元素只占用了屏幕的一部分，而且这仅在移动设备上可见 - 在我打开 chrome 设备工具栏之前，该错误不存在。

深灰色的<section>元素设置为height: 100vh; width 100vw;，我也有

html,body {
    height:auto;
    width:100vw;
    margin:0;
    padding:0;
}

我已经在手机上尝试了该网站，但错误仍然存​​在，但在调整大小的 chrome 窗口上不存在。我错过了什么？

Live link

Answer 1

感谢Temani Afif 为我指明了正确的方向。来自 MDN：

窄屏设备（例如手机）在虚拟窗口中呈现页面 或视口，通常比屏幕宽，然后缩小 渲染结果向下，因此可以立即看到所有内容。然后用户可以 平移和缩放以查看页面的不同区域。例如，如果一个 移动屏幕的宽度为 640 像素，页面可能会以 980px的虚拟视口，然后将其缩小以适应 640px 空间。

这样做是因为许多页面没有针对移动设备进行优化，并且会中断 （或至少看起来很糟糕）以较小的视口宽度渲染时。这 虚拟视口是一种使非移动优化网站在 一般在窄屏设备上看起来更好。

为了防止这种情况，使用了这个元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

这会将视口设置为固定到设备宽度。