ResizeObserverEntry: devicePixelContentBoxSize 属性

devicePixelContentBoxSize 是 ResizeObserverEntry 接口的只读属性，它返回一个数组，包含回调运行时观察元素以设备像素为单位的大小。

值

一个包含对象的数组，其中包含观察元素的新大小，以设备像素为单位。该数组是必要的，以支持具有多个片段的元素，这些片段发生在多列场景中。数组中的每个对象都包含两个属性

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" });

规范

规范
Resize Observer
# dom-resizeobserverentry-devicepixelcontentboxsize

浏览器兼容性

BCD 表格仅在浏览器中加载