获取视口

最新推荐文章于 2023-10-09 13:43:03 发布

weixin_45970898

最新推荐文章于 2023-10-09 13:43:03 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/weixin_45970898/article/details/108570488

版权

.div1 {
            width: 200px;
            height: 200px;
            margin: 30px 30px;
            background-color: aqua;
            border: 1px solid red;
            padding: 2px;
            position: relative;
        }
        
        .div2 {
            width: 100px;
            height: 100px;
            margin: 20px 20px;
            background-color: blue;
        }
        
        body {
            height: 2000px;
        }

<div class="div1">
        <div class="div2">

        </div>
</div>

console.log(window.innerWidth, window.innerHeight);
console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);

window对象中。innerWidth和innerHeight记录的是当前窗口的可视宽度和高度。由于不同浏览器有不同的规则，IE浏览器则使用的是document.documentElement.clientWidth和document.documentElement.clientHeight记录视口宽高
兼容写法：

function chakanshikou() {
    if (window.innerWidth) {
        return {
            x: window.innerWidth,
            y: window.innerHeight
        }
    } else {
        if (document.compatMode == 'cssCompat') { //标准模式
            return {
                x: document.documentElement.clientWidth,
                y: document.documentElement.clientHeight
            }
        } else {
            return {
                x: document.body.clientWidth,
                y: document.body.clientHeight
            }
        }
    }
}

创建一个获取视口的方法，判断浏览器内置对象window中是否有innerWidth这个属性，如果有返回一个对象，对象中的x属性记录视口的宽度，y记录的是视口的高度；如果没有找到，则说明为IE浏览器的低版本，判断IE浏览器是否为混乱模式，document.compatMode属性记录是浏览器状态的值，当值为cssCompat表示标准模式，使用document.documentElement.clientWidth和document.documentElement.clientHeight获取视口宽高
否则为奇异模式，通过document.body.clientWidth和document.body.clientHeight获取宽高