jQuery 的 resize 方法专门用于监听浏览器窗口的尺寸变化，调用方式简单，却有不少细节容易被忽略。通过 $(window).resize(handler) 绑定后，当用户拖动窗口边缘、点击最大化或还原、打开或关闭开发者工具时，回调函数都会执行。但 resize 并不是一个能够自动感知任意 DOM 元素尺寸变化的事件，它最初只作为 window 对象的事件存在。因此，想通过 $("#box").resize() 监听某个 <div> 容器的尺寸变化，通常会失败。下面从基础语法开始，再逐步说明元素级监听方案和常见疑问。
一、jQuery resize 基础语法与事件触发机制
.resize() 是 jQuery 提供的事件绑定方法，核心语法为 $(selector).resize(handler)。在实际项目中，绝大多数场景都是监听 window 对象，因此可以写成 $(window).resize(function(){...})。如果需要手动触发一次 resize 回调，可以调用 $(window).resize(); 或 $(window).trigger("resize");。回调函数内部通常用 $(window).width() 和 $(window).height() 获取当前视口尺寸，这两个值会随窗口变化实时更新。
下面代码展示了最基础的监听方式。每次窗口大小变化，控制台都会输出当前宽高，方便调试布局断点或响应式逻辑。
$(function () {
$(window).resize(function () {
var w = $(window).width();
var h = $(window).height();
console.log("当前窗口尺寸：" + w + " x " + h);
});
});
需要注意的是，resize 回调的执行频率并不固定。浏览器在用户拖动窗口过程中可能连续触发几十次甚至上百次。如果回调里包含 DOM 操作、重排或网络请求，页面容易产生卡顿。因此基础用法只适合简单场景，复杂逻辑需要配合防抖或节流，后面会详细说明。
二、监听普通元素尺寸变化的操作要点
不少开发者会尝试给 <div>、<section> 等普通元素绑定 resize 事件，结果发现回调始终不触发。原因在于原生 resize 事件只存在于 window 对象上，普通 HTML 元素并不会因为自身尺寸变化而派发 resize 事件。也就是说，$("#box").resize(callback) 只能监听 window 的尺寸变化，而不是元素本身的尺寸变化。
如果确实需要监听某个元素的尺寸变化，推荐使用浏览器原生 API ResizeObserver。它可以直接观察任意元素的内容框尺寸变化，支持到现代浏览器的较新版本。下面的示例使用 jQuery 获取元素，再通过 ResizeObserver 输出最新宽度和高度。
// 使用 ResizeObserver 监听元素尺寸变化
var box = document.getElementById("box");
var observer = new ResizeObserver(function (entries) {
entries.forEach(function (entry) {
var width = entry.contentRect.width;
var height = entry.contentRect.height;
console.log("box 尺寸变化：" + width + " x " + height);
});
});
observer.observe(box);
如果需要兼容不支持 ResizeObserver 的老旧浏览器，可以退而求其次：仍然监听 window 的 resize 事件，但在回调中比较目标元素旧尺寸和新尺寸，只有尺寸真正发生变化时才执行逻辑。这种方案无法感知元素由非窗口原因引起的尺寸变化，例如内部内容增加、样式调整等，但能覆盖大部分响应式布局场景。
// 用 window resize 模拟监听元素尺寸变化
var lastWidth = $("#box").width();
var lastHeight = $("#box").height();
$(window).resize(function () {
var curWidth = $("#box").width();
var curHeight = $("#box").height();
if (curWidth !== lastWidth || curHeight !== lastHeight) {
lastWidth = curWidth;
lastHeight = curHeight;
console.log("元素尺寸发生变化");
}
});
定时轮询方案也可以解决元素级监听问题，即通过 setInterval 每隔一定时间读取元素尺寸，但这种方式会造成额外的性能开销，且响应不够及时，一般只在兼容性要求非常苛刻的项目中才考虑。
三、常见疑问解答：防抖、节流、解绑与移动端适配
第一个高频疑问是：为什么给 <div> 绑定 resize 无效？前面已经解释，原生 resize 事件只在 window 上触发。jQuery 的 .resize() 方法只是对 window.resize 的封装，并不能改变事件的目标对象。想要监听普通元素尺寸变化，必须使用 ResizeObserver 或窗口比较方案。
第二个疑问是：窗口 resize 回调执行太频繁怎么办？防抖和节流是两种常用优化手段。防抖的要点是事件停止触发一段时间后才执行，适合窗口调整完成后进行布局计算；节流则是固定时间间隔内最多执行一次，适合需要持续响应的场景，例如实时修改图表尺寸。
// 防抖：停止触发 200 毫秒后才执行
var debounceTimer;
$(window).resize(function () {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(function () {
console.log("窗口尺寸调整结束");
}, 200);
});
// 节流：每 300 毫秒最多执行一次
var lastRun = 0;
$(window).resize(function () {
var now = Date.now();
if (now - lastRun >= 300) {
lastRun = now;
console.log("节流执行");
}
});
第三个疑问是如何解除 resize 绑定。直接使用匿名函数时，jQuery 无法精准移除特定回调，因此更推荐先定义具名函数，再通过 .off() 解绑。示例代码如下。
// 绑定具名函数
function onWindowResize() {
console.log("窗口变化");
}
$(window).resize(onWindowResize);
// 需要时解绑
$(window).off("resize", onWindowResize);
移动端旋转屏幕时，浏览器通常会触发 resize 事件，可以用它来更新横竖屏布局。但如果需要更精确地监听方向变化，可以同时绑定 orientationchange 事件。另外，对于高频 resize 回调，还可以借助 requestAnimationFrame 将多次更新合并到下一帧，避免同一帧内重复计算，这也是 Web 前端常用的性能优化手段。
总的来说，jQuery 的 resize 方法适合监听窗口尺寸变化，入门简单但容易误用到普通元素上。理解它的触发边界，再配合 ResizeObserver、防抖节流和具名函数解绑，就能在响应式开发中少走弯路，避免无效代码和性能问题。
jQuery resizeresize事件窗口尺寸变化修改时间：2026-09-24 15:18:44