移动设备：使用 css 获取屏幕区域大小和位置，而不仅仅是视口的

Question

这个问题说明了我花了几个月的时间才弄清楚的问题：

is mobile viewport size larger than screen size?

也就是说，在移动浏览器的屏幕区域中呈现的内容有时只是视口的一部分。仅当 meta viewport 标签指定的 zoom-out 为当前缩放值时它们才相同。

这个模型出现了一些问题，例如：css-sticky headers 没有出现在屏幕上，并且居中的元素（相对于视口）没有相对于屏幕居中。最终用户会根据缩放丢失一些信息。

如果有一些 css 值涉及屏幕区域大小和位置，我可以尝试解决这些定位问题。他们是谁？

或者，至少，是否可以通过 javascript 获得可见的屏幕矩形？

EDIT1

我在移动屏幕位置时直接检查 window、window.screen、文档和 document.documentElement 下的属性变化，但除了需要真正的视口时没有检测到变化移动，因为屏幕移出其当前边界。

EDIT2

第一个回答没有解决问题。我把代码放在运行和 console.log 每 1 秒的结果：

http://wlee.eu5.net/viewport.php

在 Chrome 模拟移动设备上打开它并稍微滚动一下。即使屏幕已移动，记录的尺寸也不会更改，直到屏幕达到真实视口限制。

您可以看到它指向“我居中”文本，该文本始终位于视口的中心，而不是屏幕。此外，视口有红色轮廓。

我认为移动浏览器会占用一部分视口以显示在屏幕上，而这正是我正在寻找的这一部分的位置。

Answer 1

如果网页应该适应移动设备，那么向您的网页添加 viewport 元标记是一个很好的做法，这样您的视口将在所有设备上得到平等的体现。您可以阅读有关此元标记的更多信息 here.

CSS中有vw、vh、vmin、vmax个尺寸单位，与用户设备的视口参数有关.如果您想让元素适应用户视口的大小，请以这些单位而不是像素或百分比指定其大小。您可以阅读有关使用这些单位的更多信息 here.

如果您不仅仅希望将对象按比例缩放到当前视口，您当然可以使用 JavaScript 检索视口信息。这是一个函数，正是这样做的：

function GetCurrentViewportLocation() {
    const xOffset = window.pageXOffset,
          yOffset = window.pageYOffset,
          vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
          vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
    
    return {
        topLeft: { x: xOffset, y: yOffset },
        topRight: { x: xOffset + vw, y: yOffset },
        bottomLeft: { x: xOffset, y: yOffset + vh },
        bottomRight: { x: xOffset + vw, y: yOffset + vh },
    }
}

放大屏幕会相应地更新坐标。

Answer 2

找到了！它属于 window.visualViewport.

https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport

方法 JSON.stringify 无法获取 visualViewport 属性，因此我无法在滚动页面时看到它们发生变化。

总结

visualViewport。pageLeft/Top 获取相对于页面的滚动视口。

visualViewport.offsetLeft/Top 获取相对于视口的屏幕矩形。这个矩形是移动浏览器在缩放页面时在屏幕上显示的内容，缩放不会改变页面滚动。

没有 css 找到这个。我会继续寻找。

移动设备：使用 css 获取屏幕区域大小和位置，而不仅仅是视口的

Mobile devices: get screen area size and position with css, not just viewport's

html

css

screen

viewport

总结