微信浏览器下，iOS的statusbar覆盖问题

在iOS设备的微信浏览器（qq浏览器等）下，window.innerHeight首次读取的高度不正确的解决办法，statusbar应该是占据空间的，但是有时候却不占据空间而是覆盖在页面“上面”，如图所示：

image.png

本来显示效果应该是右侧，但是在“首次进入页面”时却显示为左侧

“首次进入页面”指的是：从别的项目中通过window.location.href=''的方式跳转到自己的项目页面

下面有几种情景下会使页面innerHeight计算正确：

• 点击本项目url进入（如：别人微信发你一段本项目的链接，如http://www.mypage.com ，你点击进入），因为此时你的浏览器打开的第一个页面就是本项目，所以history为空数组，此时“首次页面”中不会出现statusbar，故不会有这些问题。
• 从别的项目中通过href=''的方式跳转到自己的项目页面中后，“回退”页面然后再“前进”页面。

分析：

从现象来看，底部的内容像是被浏览器自带的菜单栏挡住了，并且首次计算的高度值比实际的区域高度要大。
因此，需要测试每次读取的高度值，以及尝试其它方法来读取该高度。

window.innerHeight;
document.documentElement.clientHeight;
/*经过测试以上两个值发现，首次加载时，前者比后者的值要大。并且，后者的值是符合预期的需求的。*/

解决方案：

var getScreenHeight = function() {
    if(!document.documentElement){
       return window.innerHeight;
    }
    if(!isNaN(document.documentElement.clientHeight)&&document.documentElement.clientHeight