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

问题描述

移动端的页面，需要处理首屏为一满屏。并且，采用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%时，内部绝对定位的元素，在页面滚动后会重新布局。

秒客网