如何确定iOS上的实际视口宽度和高度
我一直被困在如此简单的任务中,比如当页面被用户放大时确定iOS上的页面宽度和高度。如何确定iOS上的实际视口宽度和高度
的问题是,一些网站有奇怪的布局,看起来像这样:
这是一个不缩放页面,它具有1164x1811像素分辨率,这是正确的。我从window.innerWidth
和window.innerHeight
得到这些值。突出显示的区域是一个正文元素,它的分辨率为1024x1594像素,这很重要。
接下来我用捏到变焦来放大页面,这是它的外观:
现在,当我试图让页面大小,我从window.innerWidth
和window.innerHeight
分别1024x1594像素。这些值与机身尺寸完全相同。
所以问题是如何获得正确的页面大小,无论是否缩放。
我已经在Chrome中测试了这个特殊情况,并得到了正确的结果:无论缩放,它总是1164x1811像素。
编辑:使用document.body.clientWidth
和document.body.clientHeight
得到你想要的计算,因为我原来的解决方案现在已经过时了。
您可以使用
检索iOS上的Safari浏览原网页大小,即使你捏缩放。document.width
和
document.height
以下是对旧Space Jam site(想到一个肯定无法响应的网站时想到的)的测试。
奇怪,这些属性在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;
}
这就是我已经结束了,并且在所有情况下都不起作用,尤其是在问题中提供的情况下,您可以尝试通过从iOS设备导航到habrahabr.ru并切换到桌面版本的站点 –
请问您是否首先在浏览器中检查您的URL。使用响应式网址使其正常工作。 – Rex
@rex的事情是,我应该能够确定视口大小,而不管移动/桌面表示页面,所以切换到响应式不是选项 –