ResizeObserverEntry: devicePixelContentBoxSize 属性
devicePixelContentBoxSize 是 ResizeObserverEntry 接口的一个只读属性，它返回一个数组，包含在回调函数运行时观察元素的设备像素尺寸。
值
一个包含对象的数组，其中包含观察元素在设备像素中的新尺寸。之所以需要数组，是为了支持具有多个片段的元素，这种情况会出现在多列场景中。数组中的每个对象都包含两个属性：
blockSize-
观察元素的块状尺寸（content-box）的设备像素尺寸。对于具有水平
writing-mode的框，这是垂直尺寸，即高度；如果 writing-mode 是垂直的，则这是水平尺寸，即宽度。 inlineSize-
观察元素的内联方向（content box）的设备像素尺寸。对于具有水平
writing-mode的框，这是水平尺寸，即宽度；如果 writing-mode 是垂直的，则这是垂直尺寸，即高度。
注意： 有关 writing modes 和块内联尺寸的更多信息，请阅读 处理不同的文本方向。
示例
以下示例摘自文章 Pixel-perfect rendering with 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 |
浏览器兼容性
加载中…