问题描述

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

QQ浏览器等window.innerHeight首次读取的高度不正确的解决办法的更多相关文章

  1. windows安装MongoDB进度条卡住,window安装mongo系统错误 2,系统错误5的解决办法(转载)

    windows安装MongoDB进度条卡住,window安装mongo系统错误 2,系统错误5的解决办法 转自:https://www.cnblogs.com/sufferingStriver/p/m ...

  2. Advanced Installer读取注册表时将Program Files读取为Program Files (x86)的解决办法

    原文:Advanced Installer读取注册表时将Program Files读取为Program Files (x86)的解决办法 今天同事在做安装包的时候,有一个读取注册表路径的需求,需要根据 ...

  3. 腾讯TT浏览器应用程序发生异常(0xc0000409) 位置为0x027a1f7f 的解决办法

    2013年8月26日下午,腾讯TT浏览器 4.8版1000 出现“应用程序发生异常(0xc0000409)  位置为0x027a1f7f ”的错误,导致浏览器自动关闭. 无论重新卸载安装还是 清理系统 ...

  4. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  5. pandas读取大文件时memoryerror的解决办法

    再用pd.read_csv读取大文件时,如果文件太大,会出现memoryerror的问题. 解决办法一:pd.read_csv的参数中有一个chunksize参数,为其赋值后,返回一个可迭代对象Tex ...

  6. ASP.NET服务器控件在IE10浏览器(非兼容模式)下报脚本错误的可能解决办法

    关于IE10出现LinkButton点击无效的情况:        一般高配置的系统如Win7旗舰版SP1系统不会出现这种情况,针对家庭普通版和专业版的用户通过测试都有这种情况,对于开发人员要解决不同 ...

  7. 用adb pull命令从android系统中读取文件失败的原因及解决办法

    问题:使用adb pull命令从android系统中读取文件失败.显示:Permission denied   原因:是由于文件权限原因引起.       使用ls -l命令查看android系统中的 ...

  8. PHP读取EXCEL时写入数据乱码解决办法

    第一步排除excel读取的数据是不是乱码 EXCEL读取时经常会出现乱码,而我们常用的字符集是UTF-8 ,GB2312(GBK) ,这就需要对编码进行转换,但是又不能对纯数字和英文字符转换,否则会乱 ...

  9. 浏览器被劫持到http://hao.169x.cn/?v=108的解决办法

    不管什么浏览器打开都是 http://hao.169x.cn/?v=108 ​1.下载wmi tool,(微软官网下载,我的下载地址是: http://120.52.73.52/download.mi ...

随机推荐

  1. loadrunner-获取返回值和自定义参数(参数运算)

    实例:手机端操作,A新增了一条事件(返回结果:事件id,例如:1), A这时需要获取新增产生的事件id,并作为参数进行传递,才能将这条事件上报给B(返回结果:事件id不变,步骤id等于事件id加1), ...

  2. Codeforces Beta Round #2 A,B,C

    A. Winner time limit per test:1 second memory limit per test:64 megabytes input:standard input outpu ...

  3. 51Nod 1080 两个数的平方和(数论,经典题)

    1080 两个数的平方和 基准时间限制:1 秒 空间限制:131072 KB 分值: 5         难度:1级算法题 给出一个整数N,将N表示为2个整数i j的平方和(i <= j),如果 ...

  4. [bzoj3191] [JLOI2013]卡牌游戏

    概率DP. 首先由题解可得>_<,胜出概率只与剩余人数.与庄家的相对位置有关. 所以设f[i][j]表示剩下i个人,从庄家开始第j个人的胜利概率... 根据卡牌一通乱搞即可... #inc ...

  5. 找出单链表中倒数第K个元素

  6. Linux6.X图形界面如何打开终端以及如何将终端加入右键

    今天刚安装了一个centos 6.9图形界面的系统,安装完成后,鼠标右击没有打开终端的按钮,在网上查了一些资料,搞明白了,分享给大家. 在左上角菜单[Applications]--->[Syst ...

  7. Spring配置集群定时任务

    正常配置定时任务的时候配置定时任务调度工厂的代码如下 <bean id="" class="org.springframework.scheduling.quart ...

  8. Java中Calendar.DAY_OF_WEEK、DAY_OF_MONTH需要减一的原因

    Java中对日期的处理需要用到Calendar类,其中有几个方法在使用时需要新手注意.1. 在获取月份时,Calendar.MONTH + 1 的原因(Java中Calendar.MONTH返回的数值 ...

  9. Hive HQL学习

    HQL学习   1.hive的数据类型 2.hive_DDL 2.1创建.删除.修改.使用数据库     Default数据库,默认的,优先级相对于其他数据库是最高的   2.2重点:创建表_内部表_ ...

  10. Responder Pro new version could analyze Win10 memory dump

    My friend John acquired a memory dump from Windows 10, but he could analyze this memory dump with an ...