手机页面获取屏幕高度那些事

发布于 2019-09-26 作者 风铃 147次 浏览 版块 前端

在做移动端页面的时候,经常会遇到需要获取屏幕的高度和宽度,进行一些特殊效果的处理或者兼容。比如在做全屏滑动上下翻页的效果(不出现滚动条),这种就需要页面加载时获取到屏幕的高度,然后才能定义,每一屏的高度。以前做pc页面时,才会说这个高度的获取会有兼容问题,clientHeight、offsetHeight 和scrollHeight的各种讨论和兼容处理已经很多了。但是在移动端,主要还是考虑webkit内核,那应该不存在这种兼容问题的啊!
但事实并非如此,在移动端设备上同样因为有各种浏览器,对上面获取高度的解析不一样,导致获取的高度不一致的问题。
后来我们发现,我们上面三个方法都是基于document下的元素的,比如document.body.clientHeight、document.body.offsetHeight、document.body.scrollHeigh;我们忽略了一个window的方法:innerHeight,所以准确的说我们获取屏幕高度的方法有四个。
我们这里的测试条件是,假如页面没有滚动条,都是一屏内容(因为我们经常是在做那种满屏滚动的专题页面才需要获取屏幕高度),系统是IOS8.1,浏览器包括Safari、chrome、UC、QQ、微信内部。
这里说一下我的测试结果(iPhone5)

Safari

alert(document.body.clientHeight);//460
alert(document.body.offsetHeight);//460
alert(document.body.scrollHeight);//460
alert(window.innerHeight);//460

chrome(chrome是没有底部工具条的)

alert(document.body.clientHeight);//504
alert(document.body.offsetHeight);//504
alert(document.body.scrollHeight);//504
alert(window.innerHeight);//504

UC

alert(document.body.clientHeight);//504
alert(document.body.offsetHeight);//504
alert(document.body.scrollHeight);//504
alert(window.innerHeight);//460

QQ

alert(document.body.clientHeight);//500
alert(document.body.offsetHeight);//500
alert(document.body.scrollHeight);//500
alert(window.innerHeight);//452

微信内部(也是是没有底部工具条的)

alert(document.body.clientHeight);//504
alert(document.body.offsetHeight);//504
alert(document.body.scrollHeight);//504
alert(window.innerHeight);//504

通过上面的数据分析,我们发现主要是UC和QQ在用这四种方法去获取高度时,表现的数据是不一致的,所以如果我们使用前面三种(clientHeight、offsetHeight、scrollHeight)得到的高度去定义页面的高度,在UC和QQ下,页面的底部内容被底部的工具条遮挡住了,因为他们的的高度计算是忽略了工具条的存在。
所以这里建议,在手机页面获取屏幕高度时,尽量使用window.innerHeight,以最大的范围兼容各种浏览器。
而对于安卓的机子,因为安卓系统版本比较多,我这里测试了安卓4.1以上的浏览器包括chrome、UC、QQ、微信内部,发现UC和QQ并没有存在IOS上面的问题,四种方法获取到的高度都是一致的!!终于发现安卓也有优胜的地方了~

收藏
暂无回复