ResizeObserver 实例化后不触发回调，常见原因是观察未挂载到 DOM 的元素；需确保元素已插入文档或在框架生命周期钩子中调用 observe，并用 isConnected 防御。
ResizeObserver 实例化后不触发回调？检查目标元素是否已挂载
常见错误是 new ResizeObserver 后立即观察一个尚未插入 DOM 的元素，比如在 document.createElement 之后立刻调用 observe，但该元素还没 append 到页面。此时 ResizeObserver 不会报错，但回调永远不会执行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素已存在于
document.body或某个已挂载的父容器中再调用observe - 若在框架（如 React/Vue）中使用，优先放在
useEffect、mounted或connectedCallback等生命周期钩子内 - 可加一层防御：用
element.isConnected判断，未连接时延迟到requestAnimationFrame或MutationObserver捕获插入事件
监听容器宽高变化但布局没重排？注意 ResizeObserver 只响应尺寸变更，不触发 reflow
ResizeObserver 的回调只告诉你“这个元素的 contentRect 变了”，它不会强制浏览器重绘或重排，也不会自动更新 CSS 类、修改样式或触发 Vue 的响应式更新。很多用户误以为监听后布局就“自动适配”了，其实只是拿到了尺寸数据，后续逻辑得自己写。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在回调里手动计算比例、切换 class（如
element.classList.toggle('is-mobile', width ） - 避免在回调中直接设置
style.width或频繁读写 offsetWidth——这可能引发强制同步布局（layout thrashing） - 如果要驱动响应式预览（比如 iframe 内嵌文档缩放），需结合
transform: scale()和transform-origin，并修正鼠标事件坐标
多个终端预览区域共存时，如何避免 ResizeObserver 相互干扰？用独立实例 + 清理机制
一个 ResizeObserver 实例可以观察多个元素，但所有回调都在同一个任务队列中执行；若多个预览区（如手机/平板/桌面模拟器）共享同一实例，某一个元素高频 resize（如拖拽调整大小）会导致其他区的回调被延迟，甚至因节流错过关键尺寸点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个预览容器使用独立的
ResizeObserver实例，避免耦合 - 在容器销毁前必须调用
unobserve(element)，否则内存泄漏且可能在已移除元素上触发回调（Chrome 会警告 “ResizeObserver loop completed with undelivered notifications”） - 可封装成可复用的 hook 或 class，内部管理
observer实例与生命周期绑定，例如：class PreviewResizer {<br> constructor(el, cb) {<br> this.observer = new ResizeObserver(entries => cb(entries[0].contentRect));<br> this.observe(el);<br> }<br> observe(el) { this.observer.observe(el); }<br> destroy() { this.observer.disconnect(); }<br>}
在 iframe 预览中监听父窗口尺寸变化？跨域限制下只能由父页主动通知
如果预览区域是 <iframe src="preview.html">，且 preview.html 与主站不同源，则子 iframe 无法用 ResizeObserver 监听父窗口尺寸——它连父窗口的 DOM 都访问不到。反过来，父页也监听不到 iframe 内容尺寸变化（除非同源）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 同源场景：父页用
iframe.contentDocument获取子文档根节点，再创建 ResizeObserver 观察其document.body - 跨域场景：必须由父页通过
postMessage主动发送尺寸信息，子页监听message事件并更新自身布局；父页自身需监听自身窗口 resize 并转发 - 别依赖
window.onresize在 iframe 内做适配——它只反映 iframe 元素自身大小变化，不是内容实际渲染尺寸
