本文详细介绍了如何使用javascript实时获取并监听浏览器窗口的宽度和高度，这对于实现响应式网页设计至关重要。我们将探讨两种主要方法：原生javascript事件监听器和react hooks，并提供相应的代码示例，旨在帮助开发者构建能够根据屏幕尺寸动态调整布局和内容的网站。

引言

在现代Web开发中，响应式设计是不可或缺的一部分。为了使网站在不同设备和屏幕尺寸上都能提供良好的用户体验，开发者经常需要根据屏幕的实时宽度和高度来动态调整页面布局、元素大小或显示内容。JavaScript提供了强大的能力来实现这一目标，通过监听浏览器窗口尺寸的变化，我们可以实时获取最新的尺寸数据并据此进行相应的操作。

核心API：window.innerWidth 和 window.innerHeight

获取浏览器视口（viewport）的当前宽度和高度是实现响应式功能的基础。JavaScript提供了 window.innerWidth 和 window.innerHeight 属性，它们分别返回浏览器窗口内容区域的宽度和高度（包括滚动条，如果存在）。

• window.innerWidth: 返回浏览器窗口的内部宽度（以像素为单位）。
• window.innerHeight: 返回浏览器窗口的内部高度（以像素为单位）。

这两个属性在页面加载时会提供初始值，但当用户调整浏览器窗口大小时，它们的值不会自动更新，需要通过事件监听来实时获取。

使用原生JavaScript监听屏幕尺寸变化

为了持续获取屏幕尺寸的变化，我们需要监听 window 对象的 resize 事件。当浏览器窗口大小发生变化时，该事件会被触发。

实现步骤

1. 定义处理函数： 创建一个函数来处理 resize 事件，在该函数内部获取 window.innerWidth 和 window.innerHeight 的最新值。
2. 添加事件监听器： 使用 window.addEventListener('resize', yourHandlerFunction) 将处理函数绑定到 resize 事件。
3. 首次调用： 由于 resize 事件只在窗口大小变化时触发，为了在页面加载时就获取到初始尺寸，需要在添加监听器后立即调用一次处理函数。
4. 清理（可选但推荐）： 如果在特定场景下不再需要监听，应使用 window.removeEventListener('resize', yourHandlerFunction) 移除事件监听器，以避免内存泄漏。

示例代码

以下是一个使用原生JavaScript实时显示屏幕尺寸的例子：

function handleResize() {
  const newWidth = window.innerWidth;
  const newHeight = window.innerHeight;

  // 假设页面中有一个id为'app'的元素用于显示尺寸
  const appElement = document.getElementById("app");
  if (appElement) {
    appElement.innerHTML = `当前宽度: ${newWidth}px, 当前高度: ${newHeight}px`;
    // 在这里可以根据newWidth和newHeight进行其他DOM操作或样式调整
    // 例如：
    // if (newWidth < 768) {
    //   document.body.classList.add('mobile-layout');
    // } else {
    //   document.body.classList.remove('mobile-layout');
    // }
  }
}

// 添加事件监听器
window.addEventListener("resize", handleResize);

// 页面加载时立即调用一次，获取初始尺寸
handleResize();

// 在需要停止监听时，可以调用：
// window.removeEventListener("resize", handleResize);

注意事项：

• 性能优化： resize 事件在窗口大小调整过程中可能会非常频繁地触发，这可能导致大量的计算和DOM操作，影响页面性能。为了避免这种情况，强烈建议使用去抖 (debounce) 或节流 (throttle) 技术来限制处理函数的执行频率。
  • 去抖 (Debounce): 在事件停止触发一段时间后才执行处理函数。
  • 节流 (Throttle): 在一段时间内只执行一次处理函数。
• CSS Media Queries： 对于纯粹的样式调整，CSS媒体查询（Media Queries）通常是更简洁、性能更好的选择。JavaScript方法更适用于需要根据尺寸进行复杂逻辑判断、动态加载组件或调整非CSS属性的场景。

在React应用中使用自定义Hook获取屏幕尺寸

在React等现代前端框架中，我们可以将获取和监听屏幕尺寸的逻辑封装成一个可复用的自定义Hook，从而在组件中更方便地使用。

示例代码：useWindowSize Hook

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() {
      // 更新state中的窗口尺寸
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    // 添加resize事件监听器
    window.addEventListener('resize', handleResize);

    // 首次渲染时立即调用一次，获取初始尺寸
    handleResize();

    // 返回一个清理函数，在组件卸载时移除事件监听器
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空依赖数组表示此Effect只在组件挂载和卸载时运行

  return windowSize;
}

如何在React组件中使用

在你的React组件中，只需调用 useWindowSize Hook 即可获取到当前的窗口尺寸：

import React from 'react';
import { useWindowSize } from './useWindowSize'; // 假设useWindowSize Hook在同级目录下

function MyResponsiveComponent() {
  const { width, height } = useWindowSize();

  if (width === undefined || height === undefined) {
    return 正在加载尺寸信息...;
  }

  return (
    
      
我的响应式组件
      
当前窗口宽度: {width}px
      
当前窗口高度: {height}px
      {width < 768 ? (
        
这是一个移动设备布局。
      ) : (
        
这是一个桌面设备布局。
      )}
      {/* 根据width和height进行其他逻辑或渲染 */}
    
  );
}

export default MyResponsiveComponent;

React Hook 的优势：

• 封装性： 将尺寸监听逻辑封装在一个独立的Hook中，提高了代码的可读性和可维护性。
• 可复用性： 任何组件都可以轻松地导入并使用 useWindowSize Hook，避免了重复代码。
• 生命周期管理： useEffect 负责处理事件监听器的添加和移除，确保在组件挂载时监听，在组件卸载时清理，有效防止内存泄漏。
• 响应式更新： useState 确保当窗口尺寸变化时，使用该Hook的组件会自动重新渲染，以反映最新的尺寸。

总结

无论是通过原生JavaScript的 window.addEventListener('resize', ...) 还是通过React的自定义Hook，实时获取和监听屏幕尺寸变化都是实现动态响应式网页的关键技术。在选择具体实现方式时，应根据项目的技术栈和需求进行权衡。对于简单的应用或非框架项目，原生JavaScript方法直接有效；而在React等组件化框架中，封装成自定义Hook则能更好地提升代码的组织性和复用性。同时，务必考虑性能优化，如去抖或节流，以确保用户体验的流畅性。