javascript获取网页宽高方法汇总

当我们需要编写一些Web应用或网站时，有时需要获取浏览器的宽度和高度等信息，以便根据宽高信息来做出一些响应式设计或适配不同尺寸设备的设计等。下面介绍一些获取网页宽高的方法。

当我们需要编写一些Web应用或网站时，有时需要获取浏览器的宽度和高度等信息，以便根据宽高信息来做出一些响应式设计或适配不同尺寸设备的设计等。下面介绍一些获取网页宽高的方法。

方法一：获取浏览器窗口宽高

通过 window.innerWidth 和 window.innerHeight 可以获取浏览器窗口实际的宽高，这个方法可用于获取当前设备的可视区域大小。示例代码如下：

//获取浏览器窗口大小
let clientWidth = window.innerWidth;
let clientHeight = window.innerHeight;
console.log(`浏览器窗口宽度为：${clientWidth}px，浏览器窗口高度为：${clientHeight}px`);

方法二：获取网页实际宽高

1. 通过 document.documentElement.clientWidth 和 document.documentElement.clientHeight 可以获取网页实际的宽高，这个方法可用于获取当前显示网页的可视区域大小。示例代码如下：

//获取网页可视区域大小
let pageWidth = document.documentElement.clientWidth;
let pageHeight = document.documentElement.clientHeight;
console.log(`网页可视区域宽度为：${pageWidth}px，网页可视区域高度为：${pageHeight}px`);

1. 通过 document.body.clientWidth 和 document.body.clientHeight 可以获取页面body部分的实际宽高，这个方法可用于获取网页实际的宽高。示例代码如下：

//获取网页实际宽高
let bodyWidth = document.body.clientWidth;
let bodyHeight = document.body.clientHeight;
console.log(`网页实际宽度为：${bodyWidth}px，网页实际高度为：${bodyHeight}px`);

以上就是获取网页宽高的主要方法及其示例说明。根据实际需求选择适合自己的方法即可。