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 resize-observer-text.html (see source) example:

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      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';
    }
  }
});

resizeObserver.observe(divElem);

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ResizeObserver() constructorChrome Full support 64Edge No support NoFirefox Full support 69IE No support NoOpera Full support 51Safari No support NoWebView Android Full support 64Chrome Android Full support 64Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support

Document Tags and Contributors

Last updated by: tmhrtwg,