Vh 和 vw 当 viewport initial-zoom 不等于 1 时

Question

我正在寻找覆盖整个屏幕的叠加层。

width: 100vw;
height: 100vh;

我正在使用的网站没有响应并且设置为 1000 像素宽。我有元：

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

设置为加载网站，使其显示为 1000 像素宽，但使用设备视口作为 vh/vw 单元，以便我可以使用媒体查询和 javascript 以 remove/initialize/not 初始化某些功能.

问题是当像素比为 1:1 且未缩小时 100vh 等于视口，因此我的 100vh/vw 比物理视口小得多。

有没有办法在保持检测较小屏幕的能力的同时，无论 scale/zoom 级别是多少都充满视口？

正如@Benjamin Solum 所指出的，我应该补充一点，这个问题出现在移动浏览器上。

Answer 1

要覆盖整个屏幕，使用绝对定位：

.overlay {
  /* For visibility */
  background: #f00;
  /* Position absolutely relative to viewport */
  position: absolute;
  /* Set edges to go all the way out to the viewport */
  top: 0; right: 0; bottom: 0; left: 0;
}

<div class="overlay">Hi!</div>

您不需要以这种方式弄乱视口元数据或类似的东西。

正如 Benjamin Solum 所说，如果您希望它无论滚动如何都保持在同一位置，您可以将其设置为固定位置。

Answer 2

缩放后不调整视口宽度和高度尺寸是浏览器实现的话题。

与似乎与 DOM 元素本身更相关的宽度和高度属性不同，我认为必须更改 vw 和 vh 的浏览器实现。

但可能有不这样做的原因，例如当前行为有用的用例。因此，对于您的缩放 + 无响应页面的情况，我认为真正解决方案的可能性很小。

Vh 和 vw 当 viewport initial-zoom 不等于 1 时

Vh and vw when viewport initial-zoom does not equal 1

css

viewport

meta

viewport-units