使用JavaScript实时监测并获取屏幕宽度与高度-html教程-PHP中文网

使用JavaScript实时监测并获取屏幕宽度与高度

本文详细介绍了如何使用javascript在网页应用中实时监测并获取屏幕的宽度与高度，以支持响应式布局。文章涵盖了两种主要实现方式：基于原生javascript的`resize`事件监听器，以及针对react应用场景的自定义`usewindowsize` hook。通过这些方法，开发者可以动态地响应屏幕尺寸变化，优化用户体验。

在现代前端开发中，创建能够适应不同设备和屏幕尺寸的响应式网页是至关重要的。为了实现这一目标，开发者经常需要实时获取浏览器视口（viewport）的宽度和高度，并根据这些尺寸动态调整页面布局或组件行为。本文将深入探讨如何利用JavaScript持续监测并获取这些关键尺寸。

一、原生JavaScript实现

原生JavaScript提供了一种直接且高效的方式来监听浏览器视口尺寸的变化。核心机制是利用window对象的resize事件和window.innerWidth/window.innerHeight属性。

window.innerWidth: 返回浏览器视口（viewport）的宽度，包括垂直滚动条的宽度（如果存在）。
window.innerHeight: 返回浏览器视口（viewport）的高度，包括水平滚动条的高度（如果存在）。

当用户调整浏览器窗口大小时，resize事件会触发。我们可以通过向window对象添加事件监听器来捕获这些变化，并在回调函数中获取最新的尺寸。

代码示例：

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来处理事件监听器的生命周期。

代码示例：

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><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10962" title="Java 接口排错助手"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Java 接口排错助手" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill10962" title="Java 接口排错助手" class="overflowclass">Java 接口排错助手</a>
													<p class="overflowclass">在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill10962" title="Java 接口排错助手" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
      {width && width 这是一个小屏幕设备。
      ) : (
        <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应用时更加得心应手。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南