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

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

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

Answer 1

尝试resize事件

$(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中，至少调整事件的大小，定位元素和文档正文可以触发独立的resize事件。

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

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") 

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