本文详细介绍了如何使用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，从而在组件中更方便地使用。
示例代码：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则能更好地提升代码的组织性和复用性。同时，务必考虑性能优化，如去抖或节流，以确保用户体验的流畅性。
以上就是JavaScript实现响应式布局：实时获取与监听屏幕尺寸变化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588081.html
微信扫一扫 
支付宝扫一扫 
