ResizeObserverEntry.devicePixelContentBoxSize

ResizeObserverEntry 接口的只读属性 devicePixelContentBoxSize 在回调运行时，返回一个包含被监听元素设备像素大小的数组。

值

一个数组，包含被监听元素的设备像素大小的对象。该数组在支持多列的场景中出现多个部分的元素时是必要的。数组中的每个对象都包含以下两个属性：

blockSize

被监听的元素在块方向上的内容盒的设备像素长度。对于具有水平 writing-mode 的盒子，这是垂直尺寸或者高度；如果 writing-mode 是垂直的，这是水平的尺寸或者宽度。

inlineSize

被监听的元素在内联方向上内容盒的设备像素长度。对于具有水平 writing-mode 的盒子，这是水平尺寸或者宽度；如果 writing-mode 是垂直的，这是垂直的尺寸或者高度。

备注：更多关于书写模式和块以及内联尺寸的解释，请阅读处理不同方向的文本。

示例

以下片段取自文章使用 devicePixelContentBox 完美地渲染。由于 ResizeObserver 的回调函数在绘制前和布局后调用。这提供了一个精确记录物理像素大小的机会，以确保将画布像素与物理像素一对一映射。

js
const observer = new ResizeObserver((entries) => {
  const entry = entries.find((entry) => entry.target === canvas);
  canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
  canvas.height = entry.devicePixelContentBoxSize[0].blockSize;

  /* … render to canvas … */
});
observer.observe(canvas, { box: "device-pixel-content-box" });

规范

Specification
Resize Observer
# dom-resizeobserverentry-devicepixelcontentboxsize

浏览器兼容性

BCD tables only load in the browser