ResizeObserverEntry: свойство devicePixelContentBoxSize

Чтение только свойство devicePixelContentBoxSize интерфейса ResizeObserverEntry возвращает массив, содержащий размер наблюдаемого элемента в пикселях устройства на момент выполнения обратного вызова.

Массив, содержащий объекты с новым размером наблюдаемого элемента в пикселях устройства. Массив необходим для поддержки элементов, имеющих несколько фрагментов, что встречается в многоколоночных сценариях. Каждый объект в массиве содержит два свойства:

blockSize

Размер области содержимого (content-box) в пикселях устройства по блочной оси наблюдаемого элемента. Для элементов с горизонтальным writing-mode это вертикальная размерность (высота); если режим написания вертикальный, это горизонтальная размерность (ширина).

inlineSize

Размер области содержимого (content-box) в пикселях устройства по направлению строки наблюдаемого элемента. Для элементов с горизонтальным writing-mode это горизонтальная размерность (ширина); если режим написания вертикальный, это вертикальная размерность (высота).

Следующий пример взят из статьи Точное отображение с помощью devicePixelContentBox. Поскольку обратный вызов ResizeObserver вызывается после макета, но до отрисовки. Это предоставляет возможность регистрировать точный размер в физических пикселях, чтобы гарантировать однозначное соответствие пикселей холста физическим пикселям.

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