ResizeObserverEntry: Eigenschaft devicePixelContentBoxSize

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

blockSize

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

inlineSize

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

Das folgende Beispiel stammt aus dem Artikel Pixel-perfect rendering with devicePixelContentBox. Da die Rückruffunktion eines ResizeObserver nach dem Layout, aber vor dem Paint aufgerufen wird, bietet sich die Gelegenheit, die genaue Größe in physischen Pixeln zu protokollieren, um eine Eins-zu-eins-Zuordnung der Canvas-Pixel 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" });