在前端开发中，我们经常需要获取浏览器窗口的宽和高，以便进行响应式布局或者调整网页中某些元素的尺寸。然而，不同的浏览器在获取窗口尺寸的方式有所不同，而且有些浏览器可能还有一些隐藏的元素导致获取的尺寸不正确。为了解决这些问题，我们可以使用 npm 包 windows-sizes。
安装
使用 npm 安装 windows-sizes 以便我们在项目中使用：
npm install windows-sizes
使用方法
使用 windows-sizes，我们只需要在项目中引入它，并调用 getWindowSizes 即可获取浏览器窗口的宽和高。
import { getWindowSizes } from 'windows-sizes'; const { width, height } = getWindowSizes(); console.log(`Window width: ${width}`); console.log(`Window height: ${height}`);
深度解析
下面我们来深入了解 windows-sizes，了解它如何获取浏览器窗口的宽和高。
getComputedStyle
在获取元素的准确尺寸时，我们不能简单地使用元素的 clientWidth 或 clientHeight 属性。这是因为这两个属性只表示元素的内容区域的尺寸，并没有包括元素的边框和内边距。为了获取全面的准确尺寸，我们需要使用 getComputedStyle 方法。这个方法会返回元素的全部样式，包括宽度、高度、内边距和边框等信息。
const element = document.querySelector('.some-element'); const styles = getComputedStyle(element); console.log(`Width: ${styles.width}`); console.log(`Height: ${styles.height}`);
浏览器窗口的宽和高
获取浏览器窗口的宽和高也需要使用 getComputedStyle 方法，但需要特别处理。
首先，使用 getWindow 方法获取当前窗口对象：
const windowObject = getWindow();
然后，创建一个新的 div 元素，并设置它的样式为 position: absolute; width: 100%; height: 100%;。这样，该元素将覆盖整个窗口区域。
const div = document.createElement('div'); div.style.position = 'absolute'; div.style.width = '100%'; div.style.height = '100%';
接下来，将该元素添加到 body 上，并使用 getComputedStyle 获取该元素的宽度和高度。由于该元素的样式中设置了宽度和高度都为 100%，它将与窗口一样大。
document.body.appendChild(div); const styles = getComputedStyle(div); const width = parseInt(styles.width, 10); const height = parseInt(styles.height, 10); document.body.removeChild(div);
最后，注意一些浏览器可能存在隐藏的元素或者滚动条等导致窗口宽高不正确的情况，windows-sizes 在获取窗口宽高时会对这些情况进行处理，以确保返回准确的值。
示例代码
下面给出一个完整的示例代码，演示如何使用 windows-sizes 获取浏览器窗口的宽和高：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ------------- ----------------- ------- ---- - ------- -- -------- -- - ------------ - --------- --------- ------ ----- ------- ----- ----------- ----------- ------- -- -------- -- ------- ----- - -------- ------- ------ ------- ------------------------------------------------------------------------------- -------- ----- - -------------- - - -------------------- ----- - ------ ------ - - ----------------- ------------------- ------ ----------- ------------------- ------- ------------ --------- ---- -------------------------- ------- -------展开代码
在上面的示例中，我们引入了 windows-sizes 的 CDN，然后在脚本中调用 getWindowSizes 获取窗口尺寸，并将其输出在控制台中。同时，我们也创建了一个 div 元素，并给它设置了样式以覆盖整个窗口，以便演示结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710b8dd3466f61ffe0f6
