获取设备分辨率与浏览器可用区域（兼容移动设备与桌面设备）
主要用于统计用户设备尺寸等信息 ie兼容至7
注意点
核心代码
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.widthscreenHeight = 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.widthscreenHeight = 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>