问题描述

移动端的页面，需要处理首屏为一满屏。并且，采用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. BZOJ:4826: [Hnoi2017]影魔

    Description 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄.每一个灵 ...

  2. C/C++中__builtin_popcount()的使用及原理

    __builtin_popcount()用于计算一个 32 位无符号整数有多少个位为1 Counting out the bits     可以很容易的判断一个数是不是2的幂次:清除最低的1位(见上面 ...

  3. [高并发]抢红包设计（使用redis）

    假设一个需求,在某个预告活动中准备了10w个红包,100w人在某个时间点去开抢,每人只能抢1次,如何保证性能和准确性,下面我给出我的一个设计方案,抛砖引玉 分析瓶颈 查询用户是否已参与过活动 获取一个 ...

  4. 1.移植3.4内核-分析内核启动过程,重新分区,烧写jffs2文件系统

    1.在上章-移植uboot里.我们来分析下uboot是如何进入到内核的 首先,uboot启动内核是通过bootcmd命令行实现的,在我们之前移植的bootcmd命令行如下所示: bootcmd=nan ...

  5. Docker版本升级至17.03

    2017/3/3,Docker官方发表了一篇博客,Docker版本从1.13.*直接跳入17.03,该版本的意思是17年3月.同时,还声明了Docker以后会以CE(Community Edition ...

  6. java final关键字的详解

    final可以修饰成员变量.局部变量.方法.和类 1.final修饰成员变量时,必须在定义时初始化或者在构造方法中初始化 表示该成员变量无法在该类中被更改,但是可以被继承.如果子类不再定义相同名字的成 ...

  7. php备份数据库类分享

    本文实例讲述了php实现MySQL数据库备份类.分享给大家供大家参考.具体分析如下:这是一个非常简单的利用php来备份mysql数据库的类文件,我们只要简单的配置好连接地址用户名与数据库即可   ph ...

  8. Sublime Text 使用介绍、全套快捷键及插件推荐

    开篇:如果说Notepad++是一款不错Code神器,那么Sublime Text应当称得上是神器滴哥.Sublime Text最大的优点就是跨平台,Mac和Windows均可完美使用:其次是强大的插 ...

  9. thinkphp无法加载控制器:Admin

    在使用thinkphp时,通过某入口文件访问其他非默认的模块(比如Admin模块),出现报错: 无法加载控制器:Admin 原因:入口文件(比如index.php)中定义了绑定某个具体的模块 如:de ...

  10. Redis 数据结构与内存管理策略（下）

    Redis 数据结构与内存管理策略(下) 标签: Redis Redis数据结构 Redis内存管理策略 Redis数据类型 Redis类型映射 Redis 数据类型特点与使用场景 String.Li ...