31

我知道您使用 $(window).width() 可以获得网络浏览器的大小。

我想检测用户何时更改其网络浏览器的大小，以便我可以重新调整列宽。有没有办法自动检测到这一点，还是我必须使用 setTimeinterval 循环并查看它是否已更改？

4

8 回答 8

52

尝试调整大小事件

$(window).resize(function() {
  console.log('window was resized');
});
于 2010-01-31T18:38:55.830 回答
32

写下这个原因不知何故，这些答案都没有给出现代最佳实践的方法：

window.addEventListener("resize", function(event) {
    console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})
于 2017-01-19T22:13:39.327 回答
21

JavaScript 事件名为window.onresize.

JQuery 绑定被命名为.resize()

于 2010-01-31T18:38:58.980 回答
8

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

window.onresize = resize;

function resize()
{
 alert("resize event detected!");
}

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

于 2015-03-19T19:56:21.827 回答
4

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

否则

window.addEventListener("resize")

随着窗口调整大小的进行，将一直触发。这会给你的 CPU 开销增加负担。

于 2017-11-17T16:36:54.373 回答
3

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

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

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

ie 处理程序在调用“真正的”调整大小处理程序之前设置一个短暂的超时（100-200 毫秒）。如果在超时之前再次调用相同的函数，它要么是冒泡事件，要么是窗口被拖到新的大小，所以清除超时并重新设置。

于 2010-01-31T22:42:04.930 回答
2

这是我为同一件事整理的一小段代码。

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

    window.addEventListener('resize', function () {
       if (window.innerWidth !== width) {
           window.location.reload(true);
       }
    });
})();
于 2018-12-27T14:26:53.643 回答
1

我使用 media="only screen and (min-width: 750px)" href="... css file for wide windows" media="only screen and (max-width: 751px)" href="...css file用于手机"

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

于 2015-04-27T12:34:07.137 回答