W3cubDocs

/Web APIs

ResizeObserverEntry: devicePixelContentBoxSize property

The devicePixelContentBoxSize read-only property of the ResizeObserverEntry 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. The array is necessary to support elements that have multiple fragments, which occur in multi-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 boxes with a horizontal writing-mode, this is the vertical dimension, or height; 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 boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height.

Note: For more information about writing modes and block and inline dimensions, read Handling different text directions.

Examples

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

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
devicePixelContentBoxSize 84 84 93 No 70 No 84 84 93 60 No 14.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize