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

Question

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

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

这是一个未缩放的页面，它的分辨率为 1164x1811 像素，这是正确的。我从window.innerWidth 和window.innerHeight 获得了这些值。高亮区域是一个 body 元素，它的分辨率为 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;
}