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 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: This example shows the use of the above-explained approach.
html
<!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>neveropen</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:Â
How to detect when the window size is resized using JavaScript ?
Method 2: Using ResizeObserver API.Â
We can use the latest ResizeObserver API to listen to the window resize event. This API is not fully supported. Example:Â
javascript
<!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>neveropen</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:Â
How to detect when the window size is resized using JavaScript ?
… [Trackback]
[…] Information on that Topic: geeksforgeeks.org/how-to-detect-when-the-window-size-is-resized-using-javascript-2/ […]