检测屏幕的宽度

 

 

【教学视频】封装检测屏幕宽度【可视区】案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>检测发现1:所有浏览器都支持怪异模式了，所以没必要在单独判断</p>
<p>检测发现2：ie9以上版本标准模式都适用，但是ie9以下只有标准模式适用</p>
</body>
</html>
<script>
    function client() {
        if(window.innerWidth != null) {  // ie9 及以上版本
            return {
                width:window.innerWidth,
                height:window.innerHeight
            }
        }else if(document.compatMode === "CSS1Compat") {  // 标准模式
            return {
                width:document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            }
        }
        return { // 怪异模式【不带有DTD】
            width:document.body.clientWidth,
            height:document.body.clientHeight
        }
    }

    console.log("ie9及以上版本"+window.innerWidth);
    console.log("标准版本"+document.documentElement.clientWidth);
    console.log("怪异模式:"+document.body.clientWidth);

        var c = client();
        document.write(c.width);
</script>

经过测试：谷歌，火狐，ie9+,ie678均支持document.documentElement.clientWidth【标准模式】。测试去除DTD，标准模式对所述浏览器也支持。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>检测发现1:所有浏览器都支持怪异模式了，所以没必要在单独判断</p>
<p>检测发现2：ie9以上版本标准模式都适用，但是ie9以下只有标准模式适用</p>
</body>
</html>
<script>
    function client() {
        return {
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        }
    }

    console.log("ie9及以上版本"+window.innerWidth);
    console.log("标准版本"+document.documentElement.clientWidth);
    console.log("怪异模式:"+document.body.clientWidth);

    var c = client();
    document.write(c.width);
</script>

直接使用标准模式封装。

posted @ 2018-08-14 08:13  刘呆哗  阅读(183)  评论(0)  编辑  收藏  举报