1、精简版
function ScreenSize() {
let width = 0;
let height = 0;
if (window.innerWidth) {
width = window.innerWidth;
height = window.innerHeight;
} else {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
return {
width: width,
height: height,
};
}
2、完整版
function ScreenSize() {
let width = 0;
let height = 0;
if (window.innerWidth) {
width = window.innerWidth;
height = window.innerHeight;
} else {
if (document.compatMode === "BackCompat") {
width = document.body.clientWidth;
height = document.body.clientHeight;
} else {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
}
return {
width: width,
height: height,
};
}
3、相应说明
3.1 兼容性
- innerWidth 接口不兼容 IE8 及其更低版本
- documentElement 接口能够兼容 IE8 ，前提是标准模式
- 只要在文档顶部第一行添加
<!DOCTYPE html>就能够确保为标准模式（按照现在的编程标准几乎不会出现缺少情况）
3.2 验证过程
3.2.1 标准模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>获取浏览器宽高</title>
</head>
<body>
<script>
console.log(document.compatMode);
console.log("--innerWidth-------------------");
console.log(window.innerWidth);
console.log(window.innerHeight);
console.log("--documentElement-------------------");
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
console.log("--body-------------------");
console.log(document.body.clientWidth);
console.log(document.body.clientHeight);
</script>
</body>
</html>
<!--输出结果-->
CSS1Compat ScreenSize.html:9:15
--innerWidth------------------- ScreenSize.html:10:15
1920 ScreenSize.html:11:15
1080 ScreenSize.html:12:15
--documentElement------------------- ScreenSize.html:13:15
1920 ScreenSize.html:14:15
1080 ScreenSize.html:15:15
--body------------------- ScreenSize.html:16:15
1904 ScreenSize.html:17:15
0 ScreenSize.html:18:15
3.2.2 怪异模式
<!--<!DOCTYPE html>-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>获取浏览器宽高</title>
</head>
<body>
<script>
console.log(document.compatMode);
console.log("--innerWidth-------------------");
console.log(window.innerWidth);
console.log(window.innerHeight);
console.log("--documentElement-------------------");
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
console.log("--body-------------------");
console.log(document.body.clientWidth);
console.log(document.body.clientHeight);
</script>
</body>
</html>
<!--输出结果-->
BackCompat ScreenSize.html:9:15
--innerWidth------------------- ScreenSize.html:10:15
1920 ScreenSize.html:11:15
1080 ScreenSize.html:12:15
--documentElement------------------- ScreenSize.html:13:15
1920 ScreenSize.html:14:15
8 ScreenSize.html:15:15
--body------------------- ScreenSize.html:16:15
1920 ScreenSize.html:17:15
1080 ScreenSize.html:18:15
3.3 函数封装
| 数据对比 | innerWidth | innerHeight | documentElement.clientWidth | documentElement.clientHeight | body.clientWidth | document.body.clientHeight |
|---|---|---|---|---|---|---|
| 标准模式 | 1920 | 1080 | 1920 | 1080 | 1920 | 0 |
| 怪异模式 | 1920 | 1080 | 1920 | 8 | 1920 | 1080 |
function ScreenSize() {
let width = 0;
let height = 0;
if (window.innerWidth) {
<!--IE9及其以上版本和现代浏览器-->
width = window.innerWidth;
height = window.innerHeight;
} else {
if (document.compatMode === "BackCompat") {
<!--兼容IE8怪异模式（很少出现可以省略）-->
width = document.body.clientWidth;
height = document.body.clientHeight;
} else {
<!--兼容IE8标准模式-->
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
}
return {
width: width,
height: height,
};
}
参考链接