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

最新推荐文章于 2023-07-02 15:58:28 发布

weixin_30702887

最新推荐文章于 2023-07-02 15:58:28 发布

阅读量928

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaoyucoding/p/7593864.html

版权

问题描述

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

转载于:https://www.cnblogs.com/xiaoyucoding/p/7593864.html

weixin_30702887

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
QQ浏览器等window.innerHeight首次读取的高度不正确的解决办法

问题描述移动端的页面，需要处理首屏为一满屏。并且，采用javascript计算高度来设置容器高度的方案。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...
复制链接

扫一扫