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

我一直被困在如此简单的任务中，比如当页面被用户放大时确定iOS上的页面宽度和高度。如何确定iOS上的实际视口宽度和高度

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

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

接下来我用捏到变焦来放大页面，这是它的外观：

现在，当我试图让页面大小，我从window.innerWidth和window.innerHeight分别1024x1594像素。这些值与机身尺寸完全相同。

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

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

来源

2017-08-16 nicholas_r

请问您是否首先在浏览器中检查您的URL。使用响应式网址使其正常工作。 – Rex

@rex的事情是，我应该能够确定视口大小，而不管移动/桌面表示页面，所以切换到响应式不是选项 –

编辑：使用document.body.clientWidth和document.body.clientHeight得到你想要的计算，因为我原来的解决方案现在已经过时了。

您可以使用 ~~document.width和 document.height~~ 检索iOS上的Safari浏览原网页大小，即使你捏缩放。

以下是对旧Space Jam site（想到一个肯定无法响应的网站时想到的）的测试。

来源

2017-08-23 14:13:01

奇怪，这些属性在iOS 10.3上是未定义的。这些都被标记为过时的规格:( –

@nicholas_r你是绝对正确的 - 我的iOS模拟器设置为9.我得到undefined在10，请保持！ –

@nicholas_r更新我的答案 - 请使用'文件.body.clientWidth'和'document.body.clientHeight'在放大时获取文档的原始尺寸。在iOS 10.3中成功测试。 –

下面是一个更为复杂的，但有点没用方式：做那么页面大小的元素计算/获取它的实际大小。

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; 
}

来源

2017-08-26 17:38:27

这就是我已经结束了，并且在所有情况下都不起作用，尤其是在问题中提供的情况下，您可以尝试通过从iOS设备导航到habrahabr.ru并切换到桌面版本的站点 –

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

回答

相关问题