Web/API/ResizeObserver/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.

Syntax

var ResizeObserver = new ResizeObserver(callback)

Parameters

callback

The function called whenever an observed resize occurs. The function is called with two parameters:

entries: An array of ResizeObserverEntry objects that can be used to access the new dimensions of the element after each change.
observer: A reference to the ResizeObserver itself, so it will definitely be accessible from inside the callback, should you need it. This could be used for example to automatically unobserve the observer when a certain condition is reached, but you can omit it if you don't need it.

The callback will generally follow a pattern along the lines of:

function(entries, observer) {
  for (let entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}

Examples

The following snippet is taken from the [[../../../../../../../mdn.github.io/dom-examples/resize-observer/resize-observer-text|resize-observer-text.html]] (see source) example:

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      // Checking for chrome as using a non-standard array
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize[0].inlineSize/200) + 'rem';
        pElem.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize/600) + 'rem';
      } else {
        h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
        pElem.style.fontSize = Math.max(1, entry.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);

Specifications

Specification	Status	Comment
Resize ObserverThe definition of 'ResizeObserver' in that specification.	Editor's Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`ResizeObserver()` constructor	Chrome Full support 64	Edge Full support 79	Firefox Full support 69	IE No support No	Opera Full support 51	Safari Full support 13.1	WebView Android Full support 64	Chrome Android Full support 64	Firefox Android No support No	Opera Android Full support 47	Safari iOS Full support 13.4	Samsung Internet Android Full support 9.0

Legend

Full support: Full support
No support: No support

ResizeObserver() by Mozilla Contributors is licensed under CC-BY-SA 2.5.