检测屏幕的宽度

Posted liudaihuablogs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了检测屏幕的宽度相关的知识，希望对你有一定的参考价值。

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

<!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>

直接使用标准模式封装。

以上是关于检测屏幕的宽度的主要内容，如果未能解决你的问题，请参考以下文章

检测屏幕的宽度

text 使用js检测屏幕横向或纵向宽度

jmobile学习之路 ----检测屏幕宽度

Phonegap - 可靠的页面宽度检测？

根据屏幕宽度修剪单词

RecyclerView 内容未使用片段父级的全宽