Widely available Supported across all major browsers. Safe to use in production.

Resize observer

The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.

Observers and Performance

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ResizeObserver
64
79
69
13.1
64
13.4
disconnect

The disconnect() method of the ResizeObserver interface unobserves all observed Element or SVGElement targets.
64
79
69
13.1
64
13.4
observe

The observe() method of the ResizeObserver interface starts observing the specified Element or SVGElement.
64
79
69
13.1
64
13.4
observe (options box parameter)

`options.box` parameter
84
84
69
15.4
84
15.4
ResizeObserver

The ResizeObserver constructor creates a new ResizeObserver object, which can be used to report changes to the content or border box of an Element or the bounding box of an SVGElement.
64
79
69
13.1
64
13.4
unobserve

The unobserve() method of the ResizeObserver interface ends the observing of a specified Element or SVGElement.
64
79
69
13.1
64
13.4
ResizeObserverEntry

The ResizeObserverEntry interface represents the object passed to the ResizeObserver.ResizeObserver constructor's callback function, which allows you to access the new dimensions of the Element or SVGElement being observed.
64
79
69
13.1
64
13.4
borderBoxSize

The borderBoxSize read-only property of the ResizeObserverEntry interface returns an array containing the new border box size of the observed element when the callback is run.
84
84
92
15.4
84
15.4
contentBoxSize

The contentBoxSize read-only property of the ResizeObserverEntry interface returns an array containing the new content box size of the observed element when the callback is run.
84
84
92
15.4
84
15.4
contentRect

The contentRect read-only property of the ResizeObserverEntry interface returns a DOMRectReadOnly object containing the new size of the observed element when the callback is run. Note that this is better supported than ResizeObserverEntry.borderBoxSize or ResizeObserverEntry.contentBoxSize, but it is left over from an earlier implementation of the Resize…
64
79
69
13.1
64
13.4
devicePixelContentBoxSize

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.
84
84
93
84
target

The target read-only property of the ResizeObserverEntry interface returns a reference to the Element or SVGElement that is being observed.
64
79
69
13.1
64
13.4
ResizeObserverSize

The ResizeObserverSize interface of the Resize Observer API is used by the ResizeObserverEntry interface to access the box sizing properties of the element being observed.
84
84
69
15.4
84
15.4
blockSize

The blockSize read-only property of the ResizeObserverSize interface returns the length of the observed element's border box in the block dimension. 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.
84
84
69
15.4
84
15.4
inlineSize

The inlineSize read-only property of the ResizeObserverSize interface returns the length of the observed element's border box in the inline dimension. 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.
84
84
69
15.4
84
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Before version 93, the `device-pixel-content-box` value is not supported.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (92)
Implementation note
  • Implemented as a single object representing a content box size, rather than an array of content box size objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (92)
Implementation note
  • Implemented as a single object representing a content box size, rather than an array of content box size objects.

Syntax

JAVASCRIPT 
const h1Elem = document.querySelector("h1");
const pElem = document.querySelector("p");
const divElem = document.querySelector("body > div");
const slider = document.querySelector('input[type="range"]');
const checkbox = document.querySelector('input[type="checkbox"]');

divElem.style.width = "600px";

slider.addEventListener("input", () => {
  divElem.style.width = `${slider.value}px`;
});

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      const contentBoxSize = entry.contentBoxSize[0];
      h1Elem.style.fontSize = `${Math.max(
        1.5,
        contentBoxSize.inlineSize / 200,
      )}rem`;
      pElem.style.fontSize = `${Math.max(
        1,
        contentBoxSize.inlineSize / 600,
      )}rem`;
    } else {
      h1Elem.style.fontSize = `${Math.max(
        1.5,
        entry.contentRect.width / 200,
      )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }

  console.log("Size changed");
});

resizeObserver.observe(divElem);

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});

Use cases

  • Using Resize observer

    The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links