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

Posted 2023-02-25

【中文标题】视口初始缩放不等于 1 时的 Vh 和 vw

【英文标题】：Vh and vw when viewport initial-zoom does not equal 1

【发布时间】：2015-09-02 18:47:42

【问题描述】：

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

width: 100vw;
height: 100vh;

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

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

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

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

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

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

【问题讨论】：

我没听说过这个，所以我在 codepen 上试了一下，它似乎工作正常（Chrome）。你用什么浏览器放大，你是如何放大的？只是增加文本大小或缩放所有内容？你试过 %'s 吗？

几乎任何移动浏览器

啊哈，在考虑桌面。你能设置一个 Codepen/JSFiddle/等吗？您可以在哪里复制我可以用手机遇到的问题？只是想验证我是否正确理解了您的问题。另外，只是为了尝试一下，<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 会解决问题吗？

抱歉耽搁了：初始比例放大浏览器，所以你只能看到角落，最小比例不允许缩小。这是小提琴：jsfiddle.net/n0rrmc9e/1 这是在手机上查看的简易版：fiddle.jshell.net/n0rrmc9e/1/show/light

是的，我不确定阻止缩小是否能解决您的特定问题。在黑暗中拍摄:)。好的，所以除了在 body 上设置 margin: 0; 以删除左上角的白色边框之外，无论我在我的 android 手机上放大还是缩小，红色方块都会覆盖整个屏幕（注 4）。根据您的 CSS，这就是我所期望的。究竟发生了什么在您的设备上不起作用？

【参考方案1】：

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

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

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

【参考方案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>

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

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

【讨论】：

这对我有用，但我会将position: absolute 替换为position: fixed。我相信作者想要的效果是想要相对于屏幕的视口定位，他们可能不希望它滚动。

唯一的缺点是我有一个谷歌地图元素，下面有一个关闭按钮。在极端情况下，用户使用地图下方的空间进行放大，只在屏幕上留下地图，他们无法退出，因为放大地图只会缩放地图而不是视口。不过我可以忍受。感谢您的回答。