量角器窗口大小 - Javascript

在Web开发中我们经常需要获取浏览器窗口的大小，特别是判断浏览器是否处于移动端，常常需要获取浏览器宽度和高度做出响应式设计。Javascript提供了一些方法，让我们可以方便地获取浏览器窗口的大小。

获取窗口大小

window.innerWidth 和 window.innerHeight

我们可以使用window.innerWidth和window.innerHeight方法来获取浏览器窗口的宽度和高度。这两个方法方法不包含浏览器工具栏和滚动条的宽高，返回的值是整数。

const width = window.innerWidth;
const height = window.innerHeight;

请注意，这些值会随着窗口大小的改变而改变，可以通过监听resize事件来更新宽高。

screen.width 和 screen.height

与window.innerWidth和window.innerHeight类似，我们可以使用screen.width和screen.height方法来获取屏幕的宽度和高度。不过这两个方法返回的是物理像素的宽高，而非CSS像素。

const width = screen.width;
const height = screen.height;

获取文档大小

有时候我们还需要获取网页文档的大小。文档大小是指文档的实际宽高，包含滚动条和不可见部分。

document.documentElement.clientWidth 和 document.documentElement.clientHeight

我们可以使用document.documentElement.clientWidth和document.documentElement.clientHeight方法来获取网页文档的宽度和高度。这两个方法返回的是CSS像素的值，不包含滚动条的宽高。

const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;

document.documentElement.scrollWidth 和 document.documentElement.scrollHeight

如果我们需要获取文档的实际大小，包括滚动条和不可见部分，可以使用document.documentElement.scrollWidth和document.documentElement.scrollHeight方法。这两个方法返回的是文档的实际宽高，包含滚动条和不可见部分。

const width = document.documentElement.scrollWidth;
const height = document.documentElement.scrollHeight;

支持移动端

如何在移动端判断浏览器窗口的大小？通常我们可以使用window.matchMedia方法来判断浏览器是否处于移动端环境，并根据不同环境返回不同的宽高值。

if (window.matchMedia('(max-width: 767px)').matches) {
  // 移动端环境
  const width = window.innerWidth;
  const height = window.innerHeight;
} else {
  // PC端环境
  const width = document.documentElement.clientWidth;
  const height = document.documentElement.clientHeight;
}

此时，我们在移动端环境下获取窗口的宽高值是window.innerWidth和window.innerHeight，在PC端环境下获取窗口的宽高值是document.documentElement.clientWidth和document.documentElement.clientHeight。

以上就是Javascript中获取浏览器窗口大小的方法与技巧的详细介绍，希望对你有所帮助！