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 |
瀏覽器相容性
載入中…