2

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

width: 100vw;
height: 100vh;

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

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

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

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

有没有办法在保持检测较小屏幕的能力的同时，无论缩放/缩放级别如何，都可以淹没视口？

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

在此处输入图像描述

4

2 回答 2

0

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

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

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

于 2016-07-26T16:38:09.607 回答
-3

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

.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 所说，如果您希望它保持在同一位置，而不管滚动，您可以将其固定在位置上。

于 2015-09-03T16:06:19.713 回答