JavaScript获取浏览器宽高
Posted 好_快
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript获取浏览器宽高相关的知识，希望对你有一定的参考价值。
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,
;
参考链接
以上是关于JavaScript获取浏览器宽高的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript获取屏可视区域宽高和页面宽高-速查对照表
javascript 代码技巧 —— javascript获取坐标/滚动/宽高/距离