自动检测Web浏览器窗口宽度变化？

Question

我知道你用$（window）.width（）可以获得web浏览器的大小。

我想检测用户何时更改其Web浏览器的大小，以便我可以重新调整列宽。 有没有办法自动检测这个或我是否必须使用setTimeinterval循环，看看它是否已经改变？

Answer 1

尝试调整大小事件

$(window).resize(function() {
  console.log('window was resized');
});

Answer 2

JavaScript事件名为window.onresize 。

JQuery绑定名为.resize()

Answer 3

写下这个原因导致这些答案都没有给出现代最佳实践方法：

window.addEventListener("resize", function(event) {
    console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})

Answer 4

在MDN中，他们提供了一个非常好的Javascript独立代码：

 window.onresize = resize; function resize() { alert("resize event detected!"); } 

如果您只需要这种功能，我建议您继续使用。

Answer 5

需要牢记的是 - 在IE中，至少调整事件气泡的大小，定位元素和文档正文可以触发独立的调整大小事件。

此外，当通过拖动调整窗口或元素的大小时，IE会触发连续的“调整大小”事件流。 其他浏览器等待鼠标触发。

IE是一个足够大的播放器，有一个中间处理程序可以调整事件大小 - 即使你只将IE客户端分支给它。

ie处理程序在调用'real'resize处理程序之前设置一个短暂的超时（100-200毫秒）。 如果在超时之前再次调用相同的函数，则它是一个bubblng事件或者窗口被拖动到一个新的大小，因此清除超时并再次设置它。

Answer 6

我使用media =“only screen and（min-width：750px）”href =“... css file for wide windows”media =“only screen and（max-width：751px）”href =“... css file手机“

当我向左和向右移动右侧窗口边框以增加和减小窗口大小时，我的Web浏览器将自动从宽窗口切换到移动设备。 我不必包含任何Javascript代码来检测窗口宽度。 这适用于Windows和Macintosh计算机上的Chrome，Firefox和Internet Explorer。

Answer 7

您可能想要使用debounce ： https ： //davidwalsh.name/javascript-debounce-function

否则

window.addEventListener("resize")

当窗口调整大小正在进行时，将触发整个时间。 这会对您的CPU开销产生负担。

Answer 8

这是我为同一件事放在一起的一小段代码。

(function () {
    var width = window.innerWidth;

    window.addEventListener('resize', function () {
       if (window.innerWidth !== width) {
           window.location.reload(true);
       }
    });
})();