本文详细介绍了如何使用 javascript 动态获取浏览器窗口的实时宽度和高度，并响应窗口大小变化。内容涵盖了原生 javascript 的事件监听机制，以及在 react 应用中通过自定义 hook 实现的封装方法，旨在帮助开发者构建高效、响应式的用户界面。
在现代 Web 开发中，构建响应式布局是不可或缺的一部分。虽然 CSS 媒体查询能处理大多数响应式需求，但在某些场景下，我们需要通过 JavaScript 动态获取并响应浏览器窗口的尺寸变化，例如根据窗口大小调整组件行为、执行复杂的布局计算或触发特定的动画。
实时获取浏览器窗口尺寸的核心方法
JavaScript 提供了 window.innerWidth 和 window.innerHeight 属性，用于获取浏览器视口（viewport）的当前宽度和高度（不包括浏览器工具栏和滚动条）。要实现“持续返回”尺寸，关键在于监听 window 对象的 resize 事件。
1. 使用 window.innerWidth 和 window.innerHeight
这两个属性是获取当前视口尺寸最直接的方式。
- window.innerWidth: 返回浏览器窗口的内部宽度，以像素计。
- window.innerHeight: 返回浏览器窗口的内部高度，以像素计。
这些值会在窗口大小发生变化时实时更新。
立即学习“Java免费学习笔记（深入）”；
2. 监听 resize 事件
为了在窗口尺寸改变时执行特定操作，我们需要为 window 对象添加一个 resize 事件监听器。
/**
* 处理窗口尺寸变化的函数
*/
function handleResize() {
const newWidth = window.innerWidth;
const newHeight = window.innerHeight;
// 在这里执行你需要根据新尺寸进行的操作
// 例如，更新 DOM 元素的内容或调整布局
document.getElementById("app").innerHTML = `
当前窗口宽度: ${newWidth}px,
当前窗口高度: ${newHeight}px
`;
console.log(`窗口尺寸更新: 宽度 ${newWidth}px, 高度 ${newHeight}px`);
}
// 注册 resize 事件监听器
window.addEventListener("resize", handleResize);
// 页面加载时立即调用一次，以获取初始尺寸
handleResize();代码解析：
- handleResize() 函数: 这是一个回调函数，当 window 的 resize 事件被触发时，它将被执行。在此函数内部，我们获取当前的 window.innerWidth 和 window.innerHeight，并可以根据这些值更新 UI 或执行其他逻辑。
- window.addEventListener("resize", handleResize): 这行代码将 handleResize 函数注册为 window 对象 resize 事件的监听器。每当用户调整浏览器窗口大小时，handleResize 函数就会被调用。
- handleResize() (初始调用): 在页面加载完成后，我们通常需要立即调用一次 handleResize 函数，以确保在没有任何 resize 事件发生之前，页面就能正确显示或使用初始的窗口尺寸。
在 React 应用中封装窗口尺寸监听
在 React 等现代前端框架中，为了更好地管理状态和副作用，通常会将这种逻辑封装成自定义 Hook。以下是一个 useWindowSize Hook 的示例，它能在 React 组件中方便地获取和响应窗口尺寸。
import { useEffect, useState } from 'react';
/**
* 一个自定义 React Hook，用于实时获取和提供浏览器窗口的尺寸。
* @returns {{width: number | undefined, height: number | undefined}} 包含窗口宽度和高度的对象。
*/
export function useWindowSize() {
// 使用 useState 存储窗口尺寸，初始值为 undefined
const [windowSize, setWindowSize] = useState({
width: undefined,
height: undefined
});
useEffect(() => {
// 定义处理 resize 事件的回调函数
function handleResize() {
// 更新状态
setWindowSize({
width: window.innerWidth,
height: window.innerHeight
});
}
// 注册 resize 事件监听器
window.addEventListener('resize', handleResize);
// 组件挂载时立即调用一次，获取初始尺寸
handleResize();
// 返回一个清理函数，在组件卸载时移除事件监听器
return () => window.removeEventListener('resize', handleResize);
}, []); // 空依赖数组表示此 effect 只在组件挂载和卸载时运行一次
return windowSize;
}useWindowSize Hook 的使用示例：
import React from 'react';
import { useWindowSize } from './useWindowSize'; // 假设 useWindowSize 在同一文件或路径下
function MyResponsiveComponent() {
const { width, height } = useWindowSize();
if (width === undefined || height === undefined) {
return <div>正在获取窗口尺寸...</div>;
}
return (
<div>
<h1>我的响应式组件</h1>
<p>当前窗口宽度: {width}px</p>
<p>当前窗口高度: {height}px</p>
{width < 768 ? (
<p>这是一个小屏幕设备。</p>
) : (
<p>这是一个大屏幕设备。</p>
)}
</div>
);
}
export default MyResponsiveComponent;代码解析：
- useState: 用于在组件中存储和更新 windowSize 状态。初始值设为 undefined，表示尺寸尚未获取。
-
useEffect: 用于处理副作用，即事件监听器的注册和清理。
- handleResize: 与原生 JS 示例中的函数类似，它获取当前窗口尺寸并更新 windowSize 状态。
- window.addEventListener('resize', handleResize): 注册事件监听器。
- handleResize(): 在 useEffect 首次执行时调用一次，确保组件挂载时即有正确的尺寸。
- return () => window.removeEventListener('resize', handleResize): 这是 useEffect 的清理机制。当组件卸载时，此函数会被调用，从而移除事件监听器，防止内存泄漏。
- [] (空依赖数组): 确保 useEffect 中的副作用函数只在组件挂载时执行一次，并在组件卸载时清理一次。
最佳实践与注意事项
在实际应用中，处理 resize 事件时需要考虑一些性能和用户体验方面的最佳实践。
1. 性能优化：防抖 (Debouncing) 与节流 (Throttling)
resize 事件在用户拖动窗口时会频繁触发，这可能导致 handleResize 函数被反复调用，如果函数内部执行了复杂的 DOM 操作或计算，可能会引起性能问题。
- 防抖 (Debouncing): 在事件停止触发后的一段时间内才执行回调函数。例如，用户拖动窗口时，每次 resize 事件都会重置一个计时器，只有当停止拖动（即在指定时间内没有新的 resize 事件触发）后，回调函数才会被执行。这适用于只需要在尺寸最终确定时执行一次操作的场景。
- 节流 (Throttling): 在一段时间内只执行一次回调函数。例如，每 200 毫秒最多执行一次 handleResize。这适用于需要持续响应但又不想过于频繁的场景。
可以使用 Lodash 等库提供的 debounce 或 throttle 函数，或者手动实现。
防抖示例：
function debounce(func, delay) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), delay);
};
}
const debouncedHandleResize = debounce(handleResize, 200); // 200毫秒防抖
window.addEventListener("resize", debouncedHandleResize);
handleResize(); // 首次调用仍然需要2. 初始尺寸获取的重要性
无论是原生 JavaScript 还是 React Hook，都应该在组件加载或脚本执行时立即调用一次处理函数，以确保在任何 resize 事件发生之前，应用程序就已经获取并使用了正确的窗口尺寸。
3. 事件监听器的清理
在原生 JavaScript 中，如果页面跳转或元素被移除，需要手动调用 window.removeEventListener()。在 React useEffect 中，通过返回一个清理函数，可以确保在组件卸载时自动移除监听器，避免内存泄漏。
4. 与 CSS Media Queries 的结合
对于大多数基于断点的响应式布局调整，CSS Media Queries 仍然是首选方案，因为它更具声明性且性能更优。JavaScript 应该用于处理那些 CSS 无法直接实现或需要动态计算的响应式行为。
总结
通过 window.innerWidth、window.innerHeight 和 window.addEventListener('resize', ...)，我们可以有效地在 JavaScript 中获取并响应浏览器窗口的尺寸变化。在原生 JS 环境中，需要手动管理事件监听器的注册和清理；而在 React 等框架中，通过自定义 Hook 可以更优雅地封装这一逻辑，实现状态管理和生命周期控制。同时，为了优化性能和用户体验，合理运用防抖和节流技术是至关重要的。
