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

 在做移动端页面的时候，经常会遇到需要获取屏幕的高度和宽度，进行一些特殊效果的处理或者兼容。比如在做全屏滑动上下翻页的效果（不出现滚动条），这种就需要页面加载时获取到屏幕的高度，然后才能定义，每一屏的高度。以前做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上面的问题，四种方法获取到的高度都是一致的！！终于发现安卓也有优胜的地方了~

本文由 w3cmark_前端笔记 版权所有，转载时请注明出处。
注明出处格式：w3cmark (http://www.w3cmark.com/2014/341.html)