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

在 web 开发中，经常需要动态调整页面布局以适应不同尺寸的设备。常见的方案是使用 CSS 媒体查询或者 JavaScript 来响应窗口大小的变化。

使用 JavaScript 监听窗口大小

要检测窗口大小的变化，可以使用 window 对象上的 resize 事件。可以使用 addEventListener() 方法来添加事件监听器，如下所示：

window.addEventListener('resize', function () {
  // 窗口大小发生变化时的处理逻辑
});

当窗口大小发生变化时，对应的事件处理函数就会被调用。在处理函数中，可以获取到当前窗口的尺寸信息，如下所示：

window.addEventListener('resize', function () {
  var width = window.innerWidth;
  var height = window.innerHeight;
  console.log('窗口大小为：' + width + 'x' + height);
});

对比新旧窗口大小

在实际开发中，常常需要判断窗口大小是否发生了变化，以防止重复执行某些操作。可以使用一个变量来记录旧的窗口大小，在事件处理函数中与新的窗口大小进行对比，如下所示：

var oldWidth = window.innerWidth;
var oldHeight = window.innerHeight;

window.addEventListener('resize', function () {
  var newWidth = window.innerWidth;
  var newHeight = window.innerHeight;
  if (newWidth !== oldWidth || newHeight !== oldHeight) {
    console.log('窗口大小发生变化');
    // 执行对应的操作
  }
  // 更新旧的窗口大小
  oldWidth = newWidth;
  oldHeight = newHeight;
});

注意事项

• resize 事件在某些浏览器中可能会被频繁触发，因此应该避免在事件处理函数中执行复杂的操作；
• 在某些情况下，如浏览器全屏模式下，窗口大小不一定能够被准确地获取。需要在具体情况下进行测试和处理。

以上就是如何监听窗口大小变化的介绍，希望对你有所帮助。