javascript - 如何确定 iOS 上的实际视口(viewport)宽度和高度

Question

当用户缩放页面时，我一直坚持在 iOS 上确定页面宽度和高度这样简单的任务。

问题是有些网站的布局很奇怪，看起来像这样:

这是一个未缩放的页面，它的分辨率为 1164x1811 像素，这是正确的。我从 window.innerWidth 和 window.innerHeight 中获得了这些值。突出显示的区域是一个主体元素，它的分辨率为 1024x1594 像素，这很重要。

接下来我使用双指缩放来放大页面，这就是它的样子:

现在，当我尝试获取页面大小时，我分别从 window.innerWidth 和 window.innerHeight 获取了 1024x1594 像素。这些值与 body 尺寸完全相同。

所以问题是无论是否使用缩放，如何获得正确的页面大小。

我也在 Chrome 中测试了这个特殊情况并得到了正确的结果:无论缩放如何，它总是 1164x1811 像素。

Answer 1

编辑:使用document.body.clientWidth和 document.body.clientHeight 以获得您想要的计算，因为我原来的解决方案现在被认为已过时。

您可以使用 document.width 和 document.height 在 iOS Safari 上检索原始页面大小，即使您捏-放大。

这是对旧 Space Jam site 的测试(当试图想到一个绝对不会响应的网站时，我想到了这一点)。