窗口视口大小 JavaScript

JavaScript 可以使用 window 对象来获取当前浏览器窗口的视口大小。视口大小指的是用户可以看到网页内容的区域大小，不包括浏览器的工具栏和滚动条等。

获取窗口大小

• window.innerWidth 与 window.innerHeight 属性可以获取浏览器窗口的视口宽度与高度（单位为像素）。

const width = window.innerWidth;
const height = window.innerHeight;
console.log(`视口大小为：${width} × ${height}`);

• document.documentElement.clientWidth 与 document.documentElement.clientHeight 属性可以获取文档根元素的视口大小。

const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;
console.log(`视口大小为：${width} × ${height}`);

• document.body.clientWidth 与 document.body.clientHeight 属性可以获取文档主体元素的视口大小。但是需要注意的是，在某些浏览器中 body 元素的大小可能没有被正确设置，因此建议使用 document.documentElement。

监听窗口大小变化事件

使用 window 对象的 resize 事件可以监听浏览器窗口的大小变化。

window.addEventListener('resize', function() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  console.log(`视口大小变化为：${width} × ${height}`);
});

兼容性问题

在某些浏览器中，如 Internet Explorer 8，无法直接使用 window.innerWidth 与 window.innerHeight 属性获取窗口大小。这时候需要使用以下代码：

if (typeof window.innerWidth !== 'undefined') {
  const width = window.innerWidth;
  const height = window.innerHeight;
  console.log(`视口大小为：${width} × ${height}`);
} else if (typeof document.documentElement !== 'undefined' && typeof document.documentElement.clientWidth !== 'undefined') {
  const width = document.documentElement.clientWidth;
  const height = document.documentElement.clientHeight;
  console.log(`视口大小为：${width} × ${height}`);
} else {
  const width = document.body.clientWidth;
  const height = document.body.clientHeight;
  console.log(`视口大小为：${width} × ${height}`);
}