How to detect when the window size is resized using JavaScript ? - GeeksforGeeks

02 Apr, 2020
The window resize event occurs whenever the size of the browser window gets changed. We can listen to the resize event in two ways:
Using onresize eventUsing Resize Observer API
Using onresize event
Using Resize Observer API
Method 1: Using resize event: We can add an event listener to the body element which fires every time when the window size is resized.
Example:
<!DOCTYPE html><html>      <head>    <title>        How to detect and resize        the window size    </title>          <style>        body {            text-align: center;        }        h1 {            color:green;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>          <h3>        Resizing the screen size and display its         <br>corresponding width and height    </h3>    <div id="height">Height: <span></span></div>    <div id="width">Width: <span></span></div>          <script>        const height = document.querySelector("#height span");        const width = document.querySelector("#width span");                   // Insert values on load of page        window.onload = function() {            height.innerHTML = window.innerHeight;            width.innerHTML = window.innerWidth;        };                   // Change values when window is resized        window.onresize = function() {                       // Setting the current height & width            // to the elements            height.innerHTML = window.innerHeight;             width.innerHTML = window.innerWidth;        };    </script></body>  </html>
Output:
Method 2: Using ResizeObserver API: We can use the latest ResizeObserver API to listen the window resize event. This API is not fully supported.
Example:
<!DOCTYPE html><html>      <head>    <title>        How to detect and resize        the window size    </title>          <style>        body {            text-align: center;        }        h1 {            color:green;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>          <h3>        Resizing the screen size and display its         <br>corresponding width and height    </h3>    <div id="height">Height: <span></span></div>    <div id="width">Width: <span></span></div>          <script>        const body = document.getElementsByTagName("body")[0];                  const height = document.querySelector("#height span");        const width = document.querySelector("#width span");          // Initialize resize observer object        let resizeObserver = new ResizeObserver(() => {                           // Set the current height and width            // to the element            height.innerHTML = window.innerHeight;            width.innerHTML = window.innerWidth;                   });                   // Add a listener to body        resizeObserver.observe(body);    </script></body>  </html>
Output:
References:
MDN
Browser Support
JavaScript-Misc
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?