本文详细介绍了如何使用javascript在网页应用中实时监测并获取屏幕的宽度与高度，以支持响应式布局。文章涵盖了两种主要实现方式：基于原生javascript的`resize`事件监听器，以及针对react应用场景的自定义`usewindowsize` hook。通过这些方法，开发者可以动态地响应屏幕尺寸变化，优化用户体验。
在现代前端开发中，创建能够适应不同设备和屏幕尺寸的响应式网页是至关重要的。为了实现这一目标，开发者经常需要实时获取浏览器视口（viewport）的宽度和高度，并根据这些尺寸动态调整页面布局或组件行为。本文将深入探讨如何利用JavaScript持续监测并获取这些关键尺寸。
一、原生JavaScript实现
原生JavaScript提供了一种直接且高效的方式来监听浏览器视口尺寸的变化。核心机制是利用window对象的resize事件和window.innerWidth/window.innerHeight属性。
- window.innerWidth: 返回浏览器视口（viewport）的宽度，包括垂直滚动条的宽度（如果存在）。
- window.innerHeight: 返回浏览器视口（viewport）的高度，包括水平滚动条的高度（如果存在）。
当用户调整浏览器窗口大小时，resize事件会触发。我们可以通过向window对象添加事件监听器来捕获这些变化，并在回调函数中获取最新的尺寸。
代码示例：
立即学习“Java免费学习笔记（深入）”；
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`); } // 1. 添加事件监听器，当窗口大小改变时触发handleResize函数 window.addEventListener("resize", handleResize); // 2. 页面加载时立即获取并显示初始尺寸 // 确保在页面首次加载时也能获取到正确的尺寸 handleResize(); // 注意：在某些复杂应用中，如果不再需要监听，应移除事件监听器以避免内存泄漏。 // 例如：window.removeEventListener("resize", handleResize);
在这个示例中，handleResize函数负责获取当前的视口宽度和高度，并将其更新到ID为app的DOM元素中。通过window.addEventListener(“resize”, handleResize)，我们确保了每次窗口尺寸变化时都会调用此函数。同时，为了在页面首次加载时就获取到正确的尺寸，我们在添加监听器后立即调用了一次handleResize()。
二、react自定义Hook实现 (usewindowsize)
对于使用React框架开发的应用程序，我们可以创建一个自定义Hook来封装上述逻辑，使其在组件中更易于复用和管理。这个Hook将利用React的useState来管理尺寸状态，以及useEffect来处理事件监听器的生命周期。
代码示例：
立即学习“Java免费学习笔记（深入）”；
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 }); } // 1. 添加事件监听器 window.addEventListener('resize', handleResize); // 2. 首次渲染时立即获取尺寸，确保初始值正确 handleResize(); // 3. 返回一个清理函数，在组件卸载时移除事件监听器，防止内存泄漏 return () => window.removeEventListener('resize', handleResize); }, []); // 空依赖数组表示此Effect只在组件挂载时运行一次，卸载时清理 return windowSize; }
使用示例：
在React组件中，你可以像使用任何其他Hook一样调用useWindowSize：
import React from 'react'; import { useWindowSize } from './useWindowSize'; // 假设useWindowSize Hook在同一目录或可导入路径 function MyResponsiveComponent() { const { width, height } = useWindowSize(); if (width === undefined) { return <div>正在加载尺寸...</div>; } return ( <div> <h1>我的响应式组件</h1> <p>当前视口宽度: {width}px</p> <p>当前视口高度: {height}px</p> {width && width < 768 ? ( // 确保width有值才进行比较 <p>这是一个小屏幕设备。</p> ) : ( <p>这是一个大屏幕设备。</p> )} </div> ); } export default MyResponsiveComponent;
这个useWindowSize Hook封装了获取和更新窗口尺寸的逻辑，使得任何需要响应窗口大小变化的React组件都能轻松地使用它，并且自动处理了事件监听器的注册与清理。
三、注意事项与性能优化
在实现实时获取屏幕尺寸的功能时，有几个关键点需要注意，尤其是在性能方面。
1. 首次加载时的尺寸获取
无论是原生JavaScript还是React Hook，都必须确保在页面首次加载或组件首次挂载时，能够立即获取到当前的视口尺寸。在上述示例中，我们通过在添加事件监听器后立即调用一次handleResize()函数来实现了这一点。如果缺少这一步，初始状态可能为undefined或旧值，导致页面渲染不正确。
2. 事件防抖 (Debouncing) 与节流 (Throttling)
resize事件在浏览器窗口被拖动时会非常频繁地触发，有时每秒可达几十甚至上百次。如果handleResize函数内部包含复杂的DOM操作或昂贵的计算，频繁触发可能导致严重的性能问题，如页面卡顿。
- 防抖 (Debouncing): 在事件停止触发一段时间后（例如200ms）才执行回调函数。这意味着如果用户持续调整窗口大小，回调函数只会在用户停止调整后执行一次。
- 节流 (Throttling): 在一定时间内（例如200ms）只允许回调函数执行一次。这意味着即使用户持续调整窗口大小，回调函数也会以固定的频率执行。
根据具体需求，选择防抖或节流可以显著提升用户体验和应用性能。
防抖示例（使用Lodash库）：
import { debounce } from 'lodash'; // 需要安装lodash库 function handleResizeOptimized() { const newWidth = window.innerWidth; const newHeight = window.innerHeight; console.log(`优化后视口尺寸变化: 宽度 ${newWidth}px, 高度 ${newHeight}px`); // 执行其他逻辑，例如更新DOM或React状态 } // 将handleResizeOptimized函数防抖，延迟300毫秒 const debouncedHandleResize = debounce(handleResizeOptimized, 300); // 添加事件监听器 window.addEventListener("resize", debouncedHandleResize); // 首次加载时调用 debouncedHandleResize(); // 在组件卸载或页面离开时，如果需要，可以移除防抖后的监听器 // 例如：window.removeEventListener("resize", debouncedHandleResize);
在React Hook中，防抖或节流通常应用于useEffect内部的handleResize函数。
3. 性能考量
除了防抖和节流，还应注意handleResize函数内部执行的操作。尽量避免在每次尺寸变化时都进行大量的DOM重绘或回流。如果只需要基于尺寸更新css变量或类名，通常会比直接操作DOM元素更高效。在React中，利用其虚拟DOM机制可以有效管理DOM更新，但仍需警惕在handleResize中执行复杂且非必要的计算。
总结
无论是通过原生JavaScript的resize事件监听器，还是利用React的useWindowSize自定义Hook，我们都能够有效地实时获取浏览器视口的宽度和高度。这些技术是实现动态响应式布局和提升用户体验的基础。在实际应用中，结合防抖或节流等性能优化策略，可以确保应用在处理频繁的尺寸变化时依然保持流畅和高效。掌握这些方法，将使您在构建现代Web应用时更加得心应手。