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

窗口调整大小事件在浏览器窗口大小改变时发生。我们可以通过以下两种方式监听调整大小事件：

使用 onresize 事件
使用 Resize Observer API

方法1：使用resize事件。

我们可以向body元素添加一个事件监听器，每当窗口大小调整时触发。

示例： 这个示例演示了上述解释方法的使用。

<!DOCTYPE html>
<html>

<head>
    <title>如何检测和调整窗口大小</title>

    <style>
        body {
            text-align: center;
        }
        h1 {
            color:green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        调整屏幕尺寸并显示其对应的
        <br>宽度和高度
    </h3>
    <div id="height">高度: <span></span></div>
    <div id="width">宽度: <span></span></div>

    <script>
        const height = document.querySelector("#height span");
        const width = document.querySelector("#width span");

        // 加载页面时插入值
        window.onload = function() {
            height.innerHTML = window.innerHeight;
            width.innerHTML = window.innerWidth;
        };

        // 窗口大小调整时更改值
        window.onresize = function() {

            // 设置当前高度和宽度
            // 到元素
            height.innerHTML = window.innerHeight;
            width.innerHTML = window.innerWidth;
        };
    </script>
</body>
</html>

输出：

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

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

方法2：使用ResizeObserver API。

我们可以使用最新的ResizeObserver API监听窗口调整大小事件。这个API并不完全支持。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>
        如何检测和调整窗口大小
    </title>
      
    <style>
        body {
            text-align: center;
        }
        h1 {
            color:green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
      
    <h3>
        调整屏幕大小并显示其
        <br>相应的宽度和高度
    </h3>
    <div id="height">高度: <span></span></div>
    <div id="width">宽度: <span></span></div>
      
    <script>
        const body = document.getElementsByTagName("body")[0];
          
        const height = document.querySelector("#height span");
        const width = document.querySelector("#width span");
  
        // 初始化调整大小观察者对象
        let resizeObserver = new ResizeObserver(() => {
              
            // 将当前高度和宽度
            // 设置到元素中
            height.innerHTML = window.innerHeight;
            width.innerHTML = window.innerWidth;
          
        });
          
        // 向 body 添加监听器
        resizeObserver.observe(body);
    </script>
</body>
</html>

输出结果:

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