如何在iOS上确定实际的视口宽度和高度

Question

当用户缩放页面时，我已经遇到了确定iOS页面宽度和高度等简单任务。

问题是某些网站的布局很奇怪，如下所示：

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

接下来，我使用双指缩放来缩放页面，这就是它的外观：

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

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

我也在Chrome中对此特定情况进行了测试并获得了正确的结果：无论是缩放，它总是1164x1811像素。

Answer 1

编辑：使用document.body.clientWidth和document.body.clientHeight进行所需的计算，因为我的原始解决方案现在已被淘汰。

即使您已经捏缩放，也可以使用 document.width和document.height 来检索iOS Safari上的原始页面大小。

这是对旧Space Jam site的测试（当我想到一个肯定不会响应的网站时会想到这一点。）

Answer 2

这是一种棘手但有点无用的方式： 制作页面大小的元素，然后计算/获取其实际大小。

let page_size = { height: null, width: null };
{
    let div = document.createElement('div');
    (styles => Object.keys(styles).forEach(k => div.style[k] = styles[k]))({
        height: '100vh', width: '100vw',
        position: 'fixed',
        top: '-100vh', left: '-100vw'
    })
    document.body.appendChild(div);
    page_size.height = div.offsetHeight;
    page_size.width = div.offsetWidth;
}