Javascript 自动检测网络浏览器窗口宽度变化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2172800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
automatically detect web browser window width change?
提问by ajsie
i know that you with $(window).width() can get the size of the web browser.
我知道你用 $(window).width() 可以获得网络浏览器的大小。
i want to detect when the user change the size of his web browser so i could readjust the columns width. is there a way to automatically detect this or do i have to use setTimeinterval to loop and see if it has changed?
我想检测用户何时更改其 Web 浏览器的大小，以便我可以重新调整列宽。有没有办法自动检测到这一点，或者我是否必须使用 setTimeinterval 来循环并查看它是否已更改？
回答by PetersenDidIt
回答by Pekka
回答by B T
Writing this down cause somehow none of these answers give the modern best-practices way of doing this:
写下这个原因不知何故这些答案都没有给出现代最佳实践方法：
window.addEventListener("resize", function(event) {
console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})
回答by jasmo2
回答by kennebec
Something to keep in mind- in IE, at least, resize events bubble, and positioned elements and the document body can fire independent resize events.
有一点要记住——至少在 IE 中，调整大小事件会冒泡，并且定位元素和文档正文可以触发独立的调整大小事件。
Also, IE fires a continuous stream of 'resize' events when the window or element is resized by dragging. The other browsers wait for the mouseup to fire.
此外，当窗口或元素通过拖动调整大小时，IE 会触发连续的“调整大小”事件流。其他浏览器等待 mouseup 触发。
IE is a big enough player that it is useful to have an intermediate handler that fields resize events- even if you branch only IE clients to it.
IE 是一个足够大的播放器，它有一个中间处理程序来处理调整大小事件是很有用的 - 即使你只将 IE 客户端分支到它。
The ie handler sets a short timeout(100-200 msec)before calling the 'real' resize handler. If the same function is called again before the timeout, it is either a bubblng event or the window is being dragged to a new size, so clear the timeout and set it again.
ie 处理程序在调用“真正的”调整大小处理程序之前设置一个短超时（100-200 毫秒）。如果在超时之前再次调用相同的函数，则可能是冒泡事件或窗口正在被拖动到新的大小，因此请清除超时并重新设置。
回答by Jacob Palme
I use media="only screen and (min-width: 750px)" href="... css file for wide windows" media="only screen and (max-width: 751px)" href="...css file for mobiles"
我使用 media="only screen and (min-width: 750px)" href="... css file for wide windows" media="only screen and (max-width: 751px)" href="...css file对于手机"
When I move the right windows border left and right to increase and decrease my window size, my web browser will automatically switch from the wide window to the mobile. I do not have to include any Javascript code to detect window width. This works for Chrome, Firefox and Internet Explorer on both Windows and Macintosh computers.
当我左右移动右窗口边框来增大和减小窗口大小时，我的网络浏览器会自动从宽窗口切换到移动窗口。我不必包含任何 Javascript 代码来检测窗口宽度。这适用于 Windows 和 Macintosh 计算机上的 Chrome、Firefox 和 Internet Explorer。
回答by Luke Dohner
You might want to use debounce:
https://davidwalsh.name/javascript-debounce-function
您可能想使用debounce：https:
//davidwalsh.name/javascript-debounce-function
Otherwise the
否则
window.addEventListener("resize")
Will fire the whole time as the window resize is in progress. Which will tax your CPU overhead.
随着窗口大小调整的进行，将一直触发。这会增加您的 CPU 开销。
回答by Anshul Sanghi
Here's a little piece of code I put together for the same thing.
这是我为同一件事编写的一小段代码。
(function () {
var width = window.innerWidth;
window.addEventListener('resize', function () {
if (window.innerWidth !== width) {
window.location.reload(true);
}
});
})();
