JavaScript 获取浏览器(显示区域)宽高的兼容写法

最新推荐文章于 2021-04-22 15:06:06 发布

VIP文章 houyanhua1

最新推荐文章于 2021-04-22 15:06:06 发布

阅读量963

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/houyanhua1/article/details/79593028

版权

demo.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //浏览器(显示区域)大小变化事件（浏览器哪怕大小变化1px也会触发该事件）
    window.onresize = function () {
        document.title = client().width + "    "+ client().height;
    }


    //获取浏览器可视区域的宽高  (兼容写法)
    function client(){
        if(window.innerHeight !== undefined){
            return {
                "width": window.innerWidth,
                "height": window.innerHeight
            }
        }else if(document.compatMode === "CSS1Compat"){
            return {
                "width": document.documentElement.clientWidth,
                "height": document.documentElement.clientHeight
            }
        }else{
            return {
                "width": document.body.clientWidth,
                "height": document.body.clientHeight
            }
        }
    }


</script>
</body>
</html>

houyanhua1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 获取浏览器(显示区域)宽高的兼容写法

demo.html： //浏览器(显示区域)大小变化事件（浏览器哪怕大小变化1px也会触发该事件） window.onresize = function () { document.title = client().width + " "+ client().height; } //获取浏览器可视区域的宽
复制链接

扫一扫