Skip to content
Related Articles

Related Articles

How to detect when the window size is resized using JavaScript ?
  • Difficulty Level : Medium
  • Last Updated : 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:

  1. Using onresize event
  2. 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

References:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :