视口初始缩放不等于1时的Vh和vw

Question

我正在寻找覆盖整个屏幕。

width: 100vw;
height: 100vh;

我正在处理的网站没有响应，设置为1000px宽。我有元：

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

设置为加载网站，使其显示为1000px宽，但使用设备视口作为vh / vw单元，以便我可以使用媒体查询和javascript删除/初始化/不初始化某些功能。

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

在保留检测较小屏幕的能力的同时，无论比例/缩放级别如何，是否有办法使视口泛滥？

正如@Benjamin Solum所指出的那样，我应该补充说，问题出现在移动浏览器上。

Answer 1

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

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

但可能有理由不像当前行为有用的用例。因此，我认为缩放+非响应页面的实际解决方案的可能性很小。

Answer 2

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

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

你不需要乱搞viewport metas或类似的东西。

正如Benjamin Solum所说，如果你想让它保持在同一位置而不管滚动，你可以将它定位。