本文详细介绍了如何使用javascript实时获取并监听浏览器窗口的宽度和高度，这对于实现响应式网页设计至关重要。我们将探讨两种主要方法：原生javascript事件监听器和react hooks，并提供相应的代码示例，旨在帮助开发者构建能够根据屏幕尺寸动态调整布局和内容的网站。
引言
在现代Web开发中，响应式设计是不可或缺的一部分。为了使网站在不同设备和屏幕尺寸上都能提供良好的用户体验，开发者经常需要根据屏幕的实时宽度和高度来动态调整页面布局、元素大小或显示内容。JavaScript提供了强大的能力来实现这一目标，通过监听浏览器窗口尺寸的变化，我们可以实时获取最新的尺寸数据并据此进行相应的操作。
核心API：window.innerWidth 和 window.innerHeight
获取浏览器视口（viewport）的当前宽度和高度是实现响应式功能的基础。JavaScript提供了 window.innerWidth 和 window.innerHeight 属性，它们分别返回浏览器窗口内容区域的宽度和高度（包括滚动条，如果存在）。
- window.innerWidth: 返回浏览器窗口的内部宽度（以像素为单位）。
- window.innerHeight: 返回浏览器窗口的内部高度（以像素为单位）。
这两个属性在页面加载时会提供初始值，但当用户调整浏览器窗口大小时，它们的值不会自动更新，需要通过事件监听来实时获取。
使用原生JavaScript监听屏幕尺寸变化
为了持续获取屏幕尺寸的变化，我们需要监听 window 对象的 resize 事件。当浏览器窗口大小发生变化时，该事件会被触发。
立即学习“Java免费学习笔记（深入）”；
实现步骤
- 定义处理函数： 创建一个函数来处理 resize 事件，在该函数内部获取 window.innerWidth 和 window.innerHeight 的最新值。
- 添加事件监听器： 使用 window.addEventListener('resize', yourHandlerFunction) 将处理函数绑定到 resize 事件。
- 首次调用： 由于 resize 事件只在窗口大小变化时触发，为了在页面加载时就获取到初始尺寸，需要在添加监听器后立即调用一次处理函数。
- 清理（可选但推荐）： 如果在特定场景下不再需要监听，应使用 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，从而在组件中更方便地使用。
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加
示例代码：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则能更好地提升代码的组织性和复用性。同时，务必考虑性能优化，如去抖或节流，以确保用户体验的流畅性。
