Question

我知道您使用$（window）.width（）可以获得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会触发连续的'resize'事件流。其他浏览器等待鼠标触发。

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

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

Answer 6

这是我为同一件事编写的一小段代码。

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

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

Answer 7

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

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

Answer 8

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

否则

window.addEventListener("resize")

当窗口调整大小正在进行时，将全部启动。这将对您的CPU开销产生负担。

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

8 个答案: