JS浏览器宽度高度，浏览器尺寸获取方法简介

1. 浏览器宽度和高度的获取方法

在使用JavaScript编写网页时，我们有时需要得到浏览器的宽度和高度数据，以便我们可以根据浏览器的大小为页面的元素进行布局和设计。JavaScript提供了两种获取浏览器宽度和高度的方法: innerWidth 和innerHeight 属性以及outerWidth 和outerHeight 属性。

2. innerWidth 和 innerHeight 属性

innerWidth和innerHeight属性表示浏览器窗口的可用宽度和高度大小。这些属性的值不包括浏览器工具栏和滚动条所占用的空间。我们可以使用window对象来访问这些属性，并将它们存储在变量中以方便使用，如下所示：

```javascript

var winWidth = window.innerWidth;

var winHeight = window.innerHeight;

```

3. outerWidth 和 outerHeight 属性

outerWidth 和 outerHeight 属性描述了浏览器窗口的实际尺寸。包括工具栏、滚动条、边框、标题栏等所占用的空间。如果我们想要获得浏览器窗口的真实大小，可以通过以下代码来获取：

```javascript

var winWidth = window.outerWidth;

var winHeight = window.outerHeight;

```

4. 浏览器尺寸的实时监听

如果我们想要实时监听浏览器窗口的变化，可以使用JavaScript中的resize事件。该事件会在浏览器窗口被调整大小时自动触发。我们可以在代码中添加监听器来处理resize事件。

```javascript

window.addEventListener('resize', function(){

var winWidth = window.innerWidth;

var winHeight = window.innerHeight;

console.log("宽度：" + winWidth + "， 高度：" +winHeight);

});

```

在上述代码中，我们使用addEventListener()方法来监听resize事件。在这个方法的回调函数中，我们使用变量winWidth和winHeight来存储窗口的宽度和高度。

5. 获取页面大小

要获取页面实际大小，可以使用document对象的documentElement属性中的客户端宽度和高度。客户端高度和宽度是不包含滚动条和边框的页面大小。我们可以使用以下代码获取页面大小：

```javascript

var pageWidth = document.documentElement.clientWidth;

var pageHeight = document.documentElement.clientHeight;

```

6. 获取文档完整宽度和高度

如果我们想要获取文档的完整宽度和高度，包括滚动条以及隐藏的部分，可以使用document对象的scrollHeight和scrollWidth属性。 scrollHeight和scrollWidth属性表示文档的完整高度和宽度，采用的是包含滚动轴的尺寸。

```javascript

var documentWidth = document.documentElement.scrollWidth;

var documentHeight = document.documentElement.scrollHeight;

```

7. 小结

以上是获取浏览器宽度、高度和页面尺寸的方法。总结起来，我们可以使用window对象的innerWidth和innerHeight属性获取浏览器窗口的大小，使用outerWidth和outerHeight属性获取实际尺寸。使用document对象的documentElement属性中的clientWidth和clientHeight属性获取页面大小。同时，我们可以使用document.documentElement.scrollWidth和scrollHeight属性获取文档的完整高度和宽度。通过这些方法，我们可以针对不同的场景来获取浏览器和页面的尺寸信息。

8. 参考链接

- https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerWidth

- https://developer.mozilla.org/zh-CN/docs/Web/API/Window/outerWidth

- https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight

- https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

文章TAG：浏览  浏览器  宽度  高度  js浏览器宽度高度