ThedevicePixelContentBoxSize read-only property oftheResizeObserverEntry interface returns an array containing the size in device pixels of the observed element when the callback is run.

Value

An array containing objects with the new size of the observed element in device pixels. Thearray is necessary to support elements that have multiple fragments, which occur inmulti-column scenarios. Each object in the array contains two properties:

blockSize

The size of the content-box, in device pixels, of the block dimension of the observed element. For boxeswith a horizontalwriting-mode, this is the vertical dimension, orheight; if the writing-mode is vertical, this is the horizontal dimension, or width.

inlineSize

The size of the content box, in device pixels, of the inline direction of the observed element. For boxeswith a horizontalwriting-mode, this is the horizontal dimension, orwidth; if the writing-mode is vertical, this is the vertical dimension, or height.

Examples

The following example is taken from the articlePixel-perfect rendering with devicePixelContentBox. As the callback function of aResizeObserveris called after layout but before paint.This provides an opportunity to log the exact size in physical pixels toensure a one-to-one mapping of canvas pixels to physical pixels.

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

Specifications

Browser compatibility