在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<window.innerHeight){
return document.documentElement.clientHeight;
}
else{
return window.innerHeight;
}
};
var resize = false;
// 只要重置一遍就可以使 bodyHeight == innerHeight-statusbarHeight
// 又因为 statusbar 只要出现了就不会消失，所以也不用重置回来
window.addEventListener('resize', function(){
if(!resize) {
document.body.style.height = getScreenHeight() + 'px';
resize=true;
}
});
