Window: resize event

The resize event fires when the document view (window) has been resized.

Bubbles No
Cancelable No
Interface UIEvent
Event handler property onresize

In some earlier browsers it was possible to register resize event handlers on any HTML element. It is still possible to set onresize attributes or use addEventListener() to set a handler on any element. However, resize events are only fired on the window object (i.e. returned by document.defaultView). Only handlers registered on the window object will receive resize events.

There is a proposal to allow all elements to be notified of resize changes. See Resize Observer to read the draft document, and GitHub issues to read the on-going discussions.

Examples

Window size logger

The following example reports the window size each time it is resized. Bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to resize before you see an effect.

<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');

function reportWindowSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

window.onresize = reportWindowSize;

addEventListener equivalent

You could set up the event handler using the addEventListener() method:

window.addEventListener('resize', reportWindowSize);

Specifications

Specification Status
Document Object Model (DOM) Level 3 Events Specification
The definition of 'resize' in that specification.
Obsolete
CSS Object Model (CSSOM) View Module
The definition of 'resize' in that specification.
Working Draft

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
resize eventChrome Full support 1
Notes
Full support 1
Notes
Notes Chrome does not emit a resize event on page load.
Edge Full support 12
Notes
Full support 12
Notes
Notes Prior to Edge 79, Edge emitted a resize event on page load. This is no longer the case.
Firefox Full support 1
Notes
Full support 1
Notes
Notes Prior to Firefox 68, Firefox emitted a resize event on page load. This is no longer the case.
IE Full support 4Opera Full support 7
Notes
Full support 7
Notes
Notes Opera does not emit a resize event on page load.
Safari Full support 1.1WebView Android Full support 1
Notes
Full support 1
Notes
Notes Webview does not emit a resize event on page load.
Chrome Android Full support 18
Notes
Full support 18
Notes
Notes Chrome does not emit a resize event on page load.
Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Prior to Firefox 68, Firefox emitted a resize event on page load. This is no longer the case.
Opera Android Full support 10.1
Notes
Full support 10.1
Notes
Notes Opera does not emit a resize event on page load.
Safari iOS Full support 1Samsung Internet Android Full support 1.0
Notes
Full support 1.0
Notes
Notes Samsung Internet does not emit a resize event on page load.

Legend

Full support
Full support
See implementation notes.
See implementation notes.

See also