ResizeObserverEntry: devicePixelContentBoxSize-Eigenschaft

Ein Array, das Objekte mit der neuen Größe des beobachteten Elements in Gerätepixeln enthält. Das Array ist notwendig, um Elemente zu unterstützen, die mehrere Fragmente haben, was in Mehrspaltenszenarien vorkommt. Jedes Objekt im Array enthält zwei Eigenschaften:

blockSize

Die Größe des content-box in Gerätepixeln der Blockdimension des beobachteten Elements. Für Boxen mit einem horizontalen writing-mode ist dies die vertikale Dimension oder Höhe; wenn der writing-mode vertikal ist, ist dies die horizontale Dimension oder Breite.

inlineSize

Die Größe des content-box in Gerätepixeln in der Inline-Richtung des beobachteten Elements. Für Boxen mit einem horizontalen writing-mode ist dies die horizontale Dimension oder Breite; wenn der writing-mode vertikal ist, ist dies die vertikale Dimension oder Höhe.

Das folgende Beispiel stammt aus dem Artikel Pixel-perfect rendering with devicePixelContentBox. Da die Callback-Funktion eines ResizeObserver nach dem Layout, aber vor dem Rendern aufgerufen wird, besteht die Möglichkeit, die exakte Größe in physischen Pixeln zu protokollieren, um eine Eins-zu-eins-Zuordnung von Canvas-Pixeln zu physischen Pixeln sicherzustellen.

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