How to detect when the window size is resized using JavaScript ?
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>zambiatek</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>zambiatek</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 ?
