問題描述
移動端的頁面，需要處理首屏為一滿屏。並且，采用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%時，內部絕對定位的元素，在頁面滾動后會重新布局。