最佳做法是附加到调整大小事件。

window.addEventListener('resize', function(event) {
    ...
}, true);

jQuery 只是包装标准的resizeDOM 事件，例如。

window.onresize = function(event) {
    ...
};

jQuery可能会做一些工作以确保 resize 事件在所有浏览器中一致触发，但我不确定是否有任何浏览器不同，但我鼓励您在 Firefox、Safari 和 IE 中进行测试。

首先，我知道addEventListener上面的评论中已经提到了该方法，但是我没有看到任何代码。由于这是首选方法，因此它是：

window.addEventListener('resize', function(event){
  // do stuff here
});

这是一个工作示例。

永远不要覆盖 window.onresize 函数。

相反，创建一个函数来向对象或元素添加事件侦听器。这会检查并防止侦听器不起作用，然后作为最后的手段覆盖对象的功能。这是 jQuery 等库中使用的首选方法。

object：元素或窗口对象
type：调整大小，滚动（事件类型）
callback：函数引用

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

然后使用是这样的：

addEvent(window, "resize", function_reference);

或使用匿名函数：

addEvent(window, "resize", function(event) {
  console.log('resized');
});

永远不应该直接使用 resize 事件，因为它会在我们调整大小时连续触发。

使用去抖动功能来减轻多余的调用。

window.addEventListener('resize',debounce(handler, delay, immediate),false);

这是一个常见的在网上漂浮的去抖动，尽管在 lodash 中寻找更高级的去抖动。

const debounce = (func, wait, immediate) => {
    var timeout;
    return () => {
        const context = this, args = arguments;
        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

这可以像这样使用......

window.addEventListener('resize', debounce(() => console.log('hello'),
200, false), false);

它永远不会每 200 毫秒触发一次以上。

对于移动方向更改，请使用：

window.addEventListener('orientationchange', () => console.log('hello'), false);

这是我整理的一个小图书馆，用来巧妙地处理这个问题。

2018+ 解决方案：

您应该使用ResizeObserver。它是一种浏览器原生解决方案，其性能比使用resize事件要好得多。此外，它不仅支持 上的事件，document还支持任意elements.

var ro = new ResizeObserver( entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

目前，Firefox、Chrome、Safari 和 Edge 支持它。对于其他（和较旧的）浏览器，您必须使用polyfill。