JS获取各种浏览器窗口大小的方法

在JavaScript中，获取浏览器窗口大小可以通过`window`对象的一些属性来实现。最常用的属性是`innerWidth`、`innerHeight`、`outerWidth`和`outerHeight`。这里简单说明下它们的作用：

- `innerWidth` 和 `innerHeight` 提供了视口（viewport）的大小，即浏览器内部用于显示内容的区域大小，不包括工具栏和滚动条。

- `outerWidth` 和 `outerHeight` 提供了包括工具栏和滚动条在内的整个浏览器窗口的大小。但请注意，并非所有浏览器都支持`outerWidth`和`outerHeight`，因为出于安全和隐私的考虑，浏览器可能不允许脚本访问这些信息。

以下是一个简单的示例代码，展示如何使用这些属性：

// 获取视口（viewport）的大小
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;

// 注意：outerWidth 和 outerHeight 可能不被所有浏览器支持
// 尝试获取整个浏览器窗口的大小（如果支持）
var outerWidth = typeof window.outerWidth !== 'undefined' ? window.outerWidth : '不支持';
var outerHeight = typeof window.outerHeight !== 'undefined' ? window.outerHeight : '不支持';

console.log('视口宽度:', viewportWidth);
console.log('视口高度:', viewportHeight);
console.log('浏览器窗口外宽度（如果支持）:', outerWidth);
console.log('浏览器窗口外高度（如果支持）:', outerHeight);

这段代码首先尝试获取视口的大小，并打印出来。然后，它尝试获取整个浏览器窗口的大小，但考虑到兼容性问题，通过检查`outerWidth`和`outerHeight`属性是否存在来避免错误。如果不存在这些属性，它将打印出“不支持”的提示。