QQ浏览器等window.innerHeight首次读取的高度不正确的解决办法

时间:2022-11-06 22:52:55

问题描述

移动端的页面,需要处理首屏为一满屏。并且,采用javascript计算高度来设置容器高度的方案。

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
text-align: center;
}
#main {
height: 100%;
}
.content {
position: relative;
}
.top {
position: absolute;
top: 50px;
width: 40%;
left: 30%;
}
.bottom {
position: absolute;
bottom: 0;
width: 40%;
left: 30%;
}
.desc {
position: relative;
margin-top: 50px;
}
</style>
</head> <body>
<!--需要满屏显示的内容-->
<div id="main">
<div class="content">
<div class="top">
第一屏最顶部的内容
</div>
<div class="bottom">
第一屏最底部的内容
</div>
</div>
<div class="desc">
第二屏的内容
</div>
</div>
<script type="text/javascript">
var domReady = function(callback) {
var readyRE = /complete|loaded|interactive/;
if(readyRE.test(document.readyState)) {
callback();
} else {
document.addEventListener('DOMContentLoaded', callback, false);
}
};
domReady(function() {
var content = document.querySelector('.content');
content.style.height = window.innerHeight + 'px';
});
</script>
</body> </html>

测试的时候发现,在QQ浏览器中,首次访问的时候,底部的部分内容未显示出来。刷新页面以后,页面显示的内容才正确。

问题分析

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

测试结果一

window.innerHeight;
document.documentElement.clientHeight;

经过测试以上两个值发现,首次加载时,前者比后者的值要大。并且,后者的值是符合预期的需求的。

测试结果二

换了个版本的QQ浏览器,发现上述两个值又相同,但是实际元素的显示并不正确。于是,尝试监听了窗口的resize事件,发现加载完成后会触发一次resize

结果一解决方案

var getScreenHeight = function() {
return document.documentElement ? document.documentElement.clientHeight : window.innerHeight;
};
content.style.height = getScreenHeight() + 'px';

结果二解决方案

var resize = false;
window.addEventListener('resize', function(){
if(!resize) {
content.style.height = getScreenHeight() + 'px';
resize = true;
}
});

补充

之所以采用动态计算高度,是因为相对定位的容器高度为100%时,内部绝对定位的元素,在页面滚动后会重新布局。