如何通过HTML的ResizeObserver的contentBoxSize获取元素内容区域的精确尺寸-html教程-PHP中文网

contentboxsize 是 resizeobserver 中获取元素内容区域尺寸的标准字段，需显式传入 {box: 'content-box'} 选项才能稳定返回 inlinesize 和 blocksize；旧版 safari 等浏览器可能为空或未实现，须用可选链和 fallback 处理。

如何通过html的resizeobserver的contentboxsize获取元素内容区域的精确尺寸

contentBoxSize 是什么，为什么不能直接用 `contentRect`

ResizeObserver 的 contentBoxSize 是现代浏览器（Chrome 84+、Firefox 89+、Safari 15.4+）中用于获取元素内容区域尺寸的正式标准字段，它替代了已被废弃的 contentRect。但很多人一上来就写 entries[0].contentBoxSize[0].inlineSize 却拿不到值——因为 contentBoxSize 是一个数组，且在某些浏览器（尤其是旧版 Safari）里可能为空或返回 border-box 尺寸而非内容框。

关键判断点：只有当 ResizeObserver 构造时传入 {box: 'content-box'} 选项，contentBoxSize 才会稳定返回内容区域尺寸；否则默认是 'border-box'，此时你拿到的其实是包含 padding 和 border 的尺寸。

如何正确读取 contentBoxSize 的 inlineSize 和 blockSize

现代规范下，contentBoxSize 数组每个元素是一个 ResizeObserverSize 对象，含 inlineSize（宽）和 blockSize（高），单位为像素，且已自动处理 writing-mode 和 direction 影响。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

必须显式指定 box: 'content-box'，否则 Safari 可能忽略该字段
contentBoxSize 在部分旧版 Chrome 中可能为 undefined，需降级 fallback 到 contentRect 或 getBoundingClientRect()
数组长度通常为 1，但多栏布局或影子 DOM 中可能为多个，应取第一个有效项

const ro = new ResizeObserver(entries => {
  for (const entry of entries) {
    // ✅ 正确访问内容区域尺寸
    const box = entry.contentBoxSize?.[0];
    const width = box?.inlineSize ?? entry.contentRect?.width;
    const height = box?.blockSize ?? entry.contentRect?.height;
    console.log('内容宽:', width, '内容高:', height);
  }
}, { box: 'content-box' }); // ? 必须传这个选项
ro.observe(document.querySelector('#target'));

常见错误：Safari 15.3 及更早版本返回空 contentBoxSize

Safari 15.3（macOS Monterey 12.2）中，即使传了 {box: 'content-box'}，contentBoxSize 仍可能为 [] 或 undefined。这不是 bug，而是该版本尚未完整实现规范。这时候强行解构会报 Cannot read property 'inlineSize' of undefined。

永远对 entry.contentBoxSize?.[0] 做可选链 + 空值合并
不要假设 contentBoxSize 一定存在，尤其做跨端组件时
若需精确到 sub-pixel，contentRect 在 Safari 中仍比 getBoundingClientRect() 更可靠（后者受缩放影响）

contentBoxSize vs getBoundingClientRect：什么时候该用谁

getBoundingClientRect() 返回的是相对于视口的盒模型，受 transform、scale、滚动、缩放影响；而 contentBoxSize 是纯内容区域逻辑尺寸，不受视觉变换干扰，且是 layout 触发后第一时间上报的值。

做响应式布局计算（如根据内容宽动态切列数）→ 优先用 contentBoxSize
需要定位弹层、计算遮罩位置 → 用 getBoundingClientRect()
监听字体加载后内容重排 → contentBoxSize 比 offsetWidth/Height 更及时（不触发回流）
服务端渲染或 SSR hydration 后首次测量 → contentBoxSize 可能尚未就绪，需加 requestAnimationFrame 保险

真正难处理的不是怎么读，而是不同浏览器对 box 选项的支持粒度不一致——比如 Firefox 目前仍不支持 'device-pixel-content-box'，而 Chrome 已支持。实际项目里，content-box 是目前唯一安全的交集选项。