Web/API/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 SpecificationThe definition of 'resize' in that specification.	Obsolete
CSS Object Model (CSSOM) View ModuleThe definition of 'resize' in that specification.	Working Draft

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
`resize` event	Chrome 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 4	Opera Full support 7 Notes' Full support 7 Notes' Notes' Opera does not emit a `resize` event on page load.	Safari Full support 1.1	WebView 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 1	Samsung 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.