使用 JavaScript/jQuery 的跨浏览器窗口大小调整事件

在现代的 Web 开发中，代码要能够适应各种设备，以便为不同的用户提供最佳的体验。而要做到这一点，需要能够方便地监测设备屏幕的大小，并对其做出相应的调整。

JavaScript 和 jQuery 提供了一些方法来监测和响应窗口大小调整事件，这些方法可以跨浏览器使用，并且相对容易实现。本文将介绍如何使用 JavaScript 和 jQuery 来监测和响应窗口大小调整事件，并且给出相应的代码示例。

监测窗口大小调整事件

要监测窗口大小调整事件，可以使用 JavaScript 的 onresize 事件。这个事件会在浏览器窗口大小变化时触发，并且可以绑定到 window 对象上。

window.onresize = function() {
  console.log('窗口大小调整事件触发！');
};

这个例子中，当窗口大小发生变化时，控制台会输出一条相应的信息。可以在这个回调函数中执行任何你想要执行的代码，例如重新计算元素的大小和位置。

值得注意的是，当窗口大小变化时，会在短时间内触发大量的 onresize 事件。为了避免响应过于频繁，可以使用 setTimeout 函数来延迟执行回调函数。

var resizeTimer;

window.onresize = function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    console.log('窗口大小调整事件触发！');
  }, 250);
};

这个例子中，使用了一个 resizeTimer 变量来保存上一个 setTimeout 函数的返回值。当窗口大小变化时，首先清除上一个 setTimeout 函数的调用，然后再执行一个新的 setTimeout 函数。这样可以保证回调函数最多只会在 250 毫秒后执行一次，从而减少响应的频率。

使用 jQuery 监测窗口大小调整事件

如果使用 jQuery 开发前端项目，那么可以使用 $(window).resize() 函数来监测窗口大小调整事件。这个函数与 onresize 事件类似，也会在窗口大小变化时触发，并且可以绑定一个回调函数。

$(window).resize(function() {
  console.log('窗口大小调整事件触发！');
});

这个例子中，当窗口大小发生变化时，控制台会输出一条相应的信息。可以在这个回调函数中执行任何你想要执行的代码，例如重新计算元素的大小和位置。

与使用 onresize 事件类似，当窗口大小变化时，会在短时间内触发大量的 resize 事件。为了避免响应过于频繁，可以使用 setTimeout 函数来延迟执行回调函数。

var resizeTimer;

$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    console.log('窗口大小调整事件触发！');
  }, 250);
});

这个例子中，与前面的例子类似，也是使用了一个 resizeTimer 变量来保存上一个 setTimeout 函数的返回值，并且利用 clearTimeout 函数来清除上一个 setTimeout 函数的调用。

结论

使用 JavaScript 和 jQuery 监测窗口大小调整事件十分容易。只需要绑定 onresize 事件或者 $(window).resize() 函数即可。为了避免响应过于频繁，可以使用 setTimeout 函数来延迟执行回调函数。