获取设备分辨率与浏览器可用区域（兼容移动设备与桌面设备）注意点 ie7-8 会比实际少4个像素 ie7纵向滚动条默认展示

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

主要用于统计用户设备尺寸等信息 ie兼容至7

注意点

ie7-8 会比实际少4个像素 ie7纵向滚动条默认展示

核心代码

 function getSizeData() {
            /**
             * 获取滚动条宽度
            */
            function getScrollWidth() {
                var scroll = document.createElement("div");
                var scrollIn = document.createElement("div");
                scroll.appendChild(scrollIn);
                scroll.style.width = "100px";
                scroll.style.height = "50px";
                scroll.style.overflow = "scroll";
                scroll.style.marginLeft = "-100000px";
                document.body.appendChild(scroll);
                var scrollInWidth = scrollIn.offsetWidth;
                var scrollWidth = scroll.offsetWidth;
                var tmp = setTimeout(function () {
                    document.body.removeChild(scroll);
                    clearTimeout(tmp);
                }, 10);

                return scrollWidth - scrollInWidth;
            }

            var dpr = window.devicePixelRatio || 1,// 物理像素分辨率与CSS像素分辨率之比 tips: ie7-10不支持此属性 值为undefined 默认给个1；
                innerWidth = null,
                innerHeight = null,
                screenWidth = null,
                screenHeight = null,
                scrollWidth = getScrollWidth();

            // 如果是移动端需要乘dpr才是真实的分辨率
            if (/(iPhone|iPad|iPod|iOS|Android|BlackBerry|HarmonyOS)/i.test(navigator.userAgent)) { //移动端
                screenWidth = window.screen.width * dpr;
                screenHeight = window.screen.height * dpr
            } else {
                screenWidth = window.screen.width
                screenHeight = window.screen.height
            }

            // XXX ie7-8 会比实际少4个像素 ie7纵向滚动条默认展示
            // 看下是否有滚动条 加上滚动条的宽度
            if (document.body.scrollWidth > document.body.clientWidth || document.documentElement.scrollWidth > document.documentElement.clientWidth) {
                innerWidth = document.documentElement.clientWidth + scrollWidth;

            } else {
                innerWidth = document.documentElement.clientWidth
            }

            if (document.body.scrollHeight > document.body.clientHeight || document.documentElement.scrollHeight > document.documentElement.clientHeight) {
                innerHeight = document.documentElement.clientHeight + scrollWidth;
            } else {
                innerHeight = document.documentElement.clientHeight
            }

            return {
                '屏幕DPR': dpr,
                '屏幕分辨率': screenWidth + '*' + screenHeight,
                '浏览器可用区域': innerWidth + '*' + innerHeight,
                '默认滚动条宽度': getScrollWidth(),
            }
        }

Demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=750, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            /* width: 2000px;
            height: 2000px; */
        }
    </style>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        function getSizeData() {
            /**
             * 获取滚动条宽度
            */
            function getScrollWidth() {
                var scroll = document.createElement("div");
                var scrollIn = document.createElement("div");
                scroll.appendChild(scrollIn);
                scroll.style.width = "100px";
                scroll.style.height = "50px";
                scroll.style.overflow = "scroll";
                scroll.style.marginLeft = "-100000px";
                document.body.appendChild(scroll);
                var scrollInWidth = scrollIn.offsetWidth;
                var scrollWidth = scroll.offsetWidth;
                var tmp = setTimeout(function () {
                    document.body.removeChild(scroll);
                    clearTimeout(tmp);
                }, 10);

                return scrollWidth - scrollInWidth;
            }

            var dpr = window.devicePixelRatio || 1,// 物理像素分辨率与CSS像素分辨率之比 tips: ie7-10不支持此属性 值为undefined 默认给个1；
                innerWidth = null,
                innerHeight = null,
                screenWidth = null,
                screenHeight = null,
                scrollWidth = getScrollWidth();

            // 如果是移动端需要乘dpr才是真实的分辨率
            if (/(iPhone|iPad|iPod|iOS|Android|BlackBerry|HarmonyOS)/i.test(navigator.userAgent)) { //移动端
                screenWidth = window.screen.width * dpr;
                screenHeight = window.screen.height * dpr
            } else {
                screenWidth = window.screen.width
                screenHeight = window.screen.height
            }

            // XXX ie7-8 会比实际少4个像素 ie7纵向滚动条默认展示
            // 看下是否有滚动条 加上滚动条的宽度
            if (document.body.scrollWidth > document.body.clientWidth || document.documentElement.scrollWidth > document.documentElement.clientWidth) {
                innerWidth = document.documentElement.clientWidth + scrollWidth;

            } else {
                innerWidth = document.documentElement.clientWidth
            }

            if (document.body.scrollHeight > document.body.clientHeight || document.documentElement.scrollHeight > document.documentElement.clientHeight) {
                innerHeight = document.documentElement.clientHeight + scrollWidth;
            } else {
                innerHeight = document.documentElement.clientHeight
            }

            return {
                '屏幕DPR': dpr,
                '屏幕分辨率': screenWidth + '*' + screenHeight,
                '浏览器可用区域': innerWidth + '*' + innerHeight,
                '默认滚动条宽度': getScrollWidth(),
            }
        }

        document.write(JSON.stringify(getSizeData()))
    </script>
</body>

</html>

我的个人公众号：归元田居每日分享前端知识与资讯～