在开发网页时，有时我们需要获取浏览器窗口的尺寸信息，以便针对不同的屏幕尺寸作出适配和响应式布局。在 JavaScript 中，我们可以通过一些方法获取浏览器窗口的宽度和高度信息。本文将介绍几种常用的获取浏览器窗口尺寸的方法。
1. 使用 window.innerWidth 和 window.innerHeight
window.innerWidth 和 window.innerHeight 是 window 对象的属性，可以获取浏览器窗口的内部宽度和高度。他们以像素为单位，不包括滚动条、工具栏和边框。
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
console.log(`浏览器窗口宽度：${windowWidth}`);
console.log(`浏览器窗口高度：${windowHeight}`);
2. 使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight
document.documentElement 是整个文档树的根节点，clientWidth 和 clientHeight 是它的属性，可以获取浏览器窗口的可见宽度和高度。同样以像素为单位，也不包括滚动条、工具栏和边框。
const documentWidth = document.documentElement.clientWidth;
const documentHeight = document.documentElement.clientHeight;
console.log(`浏览器窗口可见宽度：${documentWidth}`);
console.log(`浏览器窗口可见高度：${documentHeight}`);
3. 使用 document.body.clientWidth 和 document.body.clientHeight
在一些情况下，直接使用 document.documentElement 可能无法获取正确的窗口尺寸信息，这时可以尝试使用 document.body 对象来获取窗口的可见宽度和高度。
const bodyWidth = document.body.clientWidth;
const bodyHeight = document.body.clientHeight;
console.log(`浏览器窗口可见宽度（使用 document.body）：${bodyWidth}`);
console.log(`浏览器窗口可见高度（使用 document.body）：${bodyHeight}`);
注意，使用 document.body 前需要确保页面中存在具有尺寸的元素。否则，这种方式可能无法获取到正确的窗口尺寸。
4. 使用 window.outerWidth 和 window.outerHeight
window.outerWidth 和 window.outerHeight 是 window 对象的属性，可以获取浏览器窗口的外部宽度和高度。他们以像素为单位，包括滚动条、工具栏和边框。
const outerWidth = window.outerWidth;
const outerHeight = window.outerHeight;
console.log(`浏览器窗口外部宽度：${outerWidth}`);
console.log(`浏览器窗口外部高度：${outerHeight}`);
总结
本文介绍了几种常用的获取浏览器窗口尺寸的方法，包括使用 window.innerWidth 和 window.innerHeight、document.documentElement.clientWidth 和 document.documentElement.clientHeight、document.body.clientWidth 和 document.body.clientHeight，以及 window.outerWidth 和 window.outerHeight。根据实际需求，选择合适的方法来获取浏览器窗口尺寸信息，以便进行响应式设计和布局。
希望本文对你了解如何获取浏览器窗口尺寸有所帮助！如有任何疑问或建议，请随时留言。
本文来自极简博客，作者：人工智能梦工厂，转载请注明原文链接：JS：如何获取浏览器窗口尺寸？
