W3cubDocs

/Web APIs

Window: resize event

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

This event is not cancelable and does not bubble.

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.

While the resize event fires only for the window nowadays, you can get resize notifications for other elements using the ResizeObserver API.

If the resize event is triggered too many times for your application, see Optimizing window.onresize to control the time after which the event fires.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js

addEventListener("resize", (event) => {});

onresize = (event) => {};

Event type

A UIEvent. Inherits from Event.

Event UIEvent

Event properties

This interface also inherits properties of its parent, Event.

UIEvent.detail Read only

Returns a long with details about the event, depending on the event type.

UIEvent.sourceCapabilities Experimental Read only

Returns an instance of the InputDeviceCapabilities interface, which provides information about the physical device responsible for generating a touch event.

UIEvent.view Read only

Returns a WindowProxy that contains the view that generated the event.

UIEvent.which Deprecated Non-standard Read only

Returns the numeric keyCode of the key pressed, or the character code (charCode) for an alphanumeric key pressed.

Examples

Window size logger

The following example reports the window size each time it is resized.

HTML

html

<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>

JavaScript

js

const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

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

window.onresize = reportWindowSize;

Result

Note: The example output here is in an <iframe>, so the reported width and height values are for the <iframe>, not the window that this page is in. In particular, it will be hard to adjust the window size so as to see a difference in the reported height.

The effect is easier to see if you view the example in its own window.

addEventListener equivalent

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

js

window.addEventListener("resize", reportWindowSize);

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
resize_event
1Chrome does not fire a resize event on page load.
12Before Edge 79, Edge fired a resize event on page load. This is no longer the case.
1Before Firefox 68, Firefox fired a resize event on page load. This is no longer the case.
4
7Opera does not fire a resize event on page load.
1.1
1WebView does not fire a resize event on page load.
18Chrome does not fire a resize event on page load.
4Before Firefox 68, Firefox fired a resize event on page load. This is no longer the case.
10.1Opera does not fire a resize event on page load.
1
1.0Samsung Internet does not fire a resize event on page load.

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event