Html 移动设备：使用css获取屏幕区域大小和位置，而不仅仅是viewport'；s

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

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

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

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

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

EDIT1

在移动屏幕位置时，我检查了window、window.screen、document和document.documentElement下的属性是否发生了更改，但由于屏幕已超出其当前边界，因此除了需要移动真实视口时，未检测到任何更改

EDIT2

第一个答案不能解决问题。我将代码置于运行状态，并在此处每隔1秒记录一次结果：

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

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

---

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

如果一个网页应该适应移动设备，那么在页面上添加

视口

元标记将是一个很好的实践，这样，您的视口将在所有设备上均匀显示。您可以阅读有关此元标记的更多信息

CSS中有与用户设备的视口参数相关的

vw

、

vh

、

vmin

和

vmax

大小单位。如果要使元素适应用户视口的大小，请使用这些单位而不是像素或百分比指定其大小。您可以阅读有关使用这些单位的更多信息

如果您不想仅按当前视口的比例缩放对象，当然可以使用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 },
    }
}

---

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

如果一个网页应该适应移动设备，那么最好在页面中添加

视口

元标记，以便在所有设备上平等地表示视口。您可以阅读有关此元标记的更多信息

CSS中有与用户设备的视口参数相关的

vw

、

vh

、

vmin

和

vmax

大小单位。如果要使元素适应用户视口的大小，请使用这些单位而不是像素或百分比指定其大小。您可以阅读有关使用这些单位的更多信息

如果您不想仅按当前视口的比例缩放对象，当然可以使用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 },
    }
}

---

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

找到了！它位于窗口下。visualViewport

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

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

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

---

找不到这个的css。我会继续搜索。

找到了！它位于窗口下。visualViewport

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

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

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

---

找不到这个的css。我会继续搜索。

不起作用。它获取的是视口位置，而不是视口内的屏幕。我将尝试制作一个显示问题的页面，这可能被误解。不起作用。它获取的是视口位置，而不是视口内的屏幕。我将尝试制作一个页面，显示可能被误解的问题。