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

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