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

问题描述

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

is mobile viewport size larger than screen size?

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

此模型出现一些问题，例如：css-sticky标头不出现在屏幕中，居中元素（相对于视口）未相对于屏幕居中。最终用户会丢失一些信息，具体取决于缩放比例。

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

或者至少可以用javascript获取可见的屏幕矩形吗？

EDIT1

我在移动屏幕位置时直接在window，window.screen，document和document.documentElement下检查了属性的更改，但是除了真正的视口需要移动（因为屏幕从当前位置移出）以来，未检测到任何更改范围。

EDIT2

第一个答案不能解决问题。我将代码运行并在此处每1秒console.log记录结果：

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

在可模拟移动设备的Chrome上将其打开，然后滚动一点。即使屏幕已经移动，在屏幕达到实际视口限制之前，记录的尺寸也不会更改。

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

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

解决方法

如果应该使网页适应移动设备，那么最好在页面上添加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,bottomLeft: { x: xOffset,y: yOffset + vh },bottomRight: { x: xOffset + vw,}
}

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

找到了！它位于 window.visualViewport 下。

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

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

摘要

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

visualViewport.offsetLeft / Top获取相对于视口的屏幕矩形。此矩形是移动浏览器在缩放页面时在屏幕上显示的内容，而无需更改页面滚动即可实现。

找不到此CSS。我会继续搜索。

html screen screen viewport