如何检测何时使用 JavaScript 调整窗口大小？

每当浏览器窗口的大小发生变化时，都会发生窗口调整大小事件。我们可以通过两种方式监听resize事件：

1. 使用onresize事件
2. 使用调整大小观察者API

方法一：使用resize事件：我们可以给body元素添加一个事件监听器，每次调整窗口大小时都会触发。

例子：

      

    
        How to detect and resize
        the window size
    
      
    
        body {
            text-align: center;
        }
        h1 {
            color:green;
        }
    

  

    GeeksforGeeks
      
    
        Resizing the screen size and display its 
        corresponding width and height
    
    Height: 
    Width: 
      
    
        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;
        };
    

  

输出：

方法二：使用 ResizeObserver API：我们可以使用最新的 ResizeObserver API 来监听窗口调整大小事件。不完全支持此 API。

例子：

      

    
        How to detect and resize
        the window size
    
      
    
        body {
            text-align: center;
        }
        h1 {
            color:green;
        }
    

  

    GeeksforGeeks
      
    
        Resizing the screen size and display its 
        corresponding width and height
    
    Height: 
    Width: 
      
    
        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);
    

  

输出：

参考：

• MDN
• 浏览器支持