获取窗口大小 JavaScript

在前端开发中，我们常常需要获取窗口大小的信息，以便在布局和设计中做出相应的调整。本篇文章将介绍在 JavaScript 中如何获取窗口大小。

获取窗口大小

为了获取窗口大小，我们可以使用以下几种方法：

1. window.innerWidth 和 window.innerHeight

window.innerWidth 返回窗口宽度，不包括滚动条等非内容区域的宽度。

window.innerHeight 返回窗口高度，不包括滚动条等非内容区域的高度。

const width = window.innerWidth;
const height = window.innerHeight;
console.log(`窗口宽度是 ${width}px，窗口高度是 ${height}px`);

2. document.documentElement.clientWidth 和 document.documentElement.clientHeight

document.documentElement.clientWidth 返回浏览器可视区域的宽度，不包括滚动条。

document.documentElement.clientHeight 返回浏览器可视区域的高度，不包括滚动条。

const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;
console.log(`浏览器可视区域宽度是 ${width}px，浏览器可视区域高度是 ${height}px`);

3. document.body.clientWidth 和 document.body.clientHeight

在某些情况下，document.documentElement.clientWidth 和 document.documentElement.clientHeight 可能无法直接获取到正确的值，此时我们可以使用 document.body.clientWidth 和 document.body.clientHeight 来获取窗口大小。不过需要注意的是，这两个属性只能在 body 标签已经加载完毕之后才能获取到正确的值。

document.body.onload = function() {
  const width = document.body.clientWidth;
  const height = document.body.clientHeight;
  console.log(`网页内容区域宽度是 ${width}px，网页内容区域高度是 ${height}px`);
}

总结

以上是 JavaScript 中获取窗口大小的方法。选择哪一种方法要根据具体情况而定，需要尝试并选择最适合当前场景的方法。在处理响应式设计和布局时，上述方法非常有用。