自動檢測網頁瀏覽器窗口寬度變化？

Question

我知道你用$（window）.width（）可以獲得網頁瀏覽器的大小。

我想檢測用戶何時更改其Web瀏覽器的大小，以便我可以重新調整列寬。有沒有辦法自動檢測到這一點，或者我必須使用setTimeinterval循環，看看它是否已經改變？

Answer 1

嘗試resize event

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

Answer 2

的JavaScript事件被命名爲window.onresize。

jQuery的結合被命名.resize()

Answer 3

東西保持在mind- IE，至少，調整大小事件氣泡，並且定位元件和文檔主體可以觸發獨立調整大小的事件。

此外，當窗口或元素通過拖動調整大小時，IE會觸發連續的「調整大小」事件流。其他瀏覽器等待mouseup啓動。

IE是一個足夠大的播放器，它有一箇中間處理程序來調整事件大小 - 即使只將IE客戶端分支到它也是有用的。

ie處理程序在調用'真正'調整大小處理程序之前設置一個短超時（100-200毫秒）。如果在超時之前再次調用相同的函數，則它可能是bubblng事件，或者窗口被拖動到新的大小，因此請清除超時並重新設置。

Answer 4

在MDN他們給一個很好的Javascript獨立代碼：

window.onresize = resize; 
 

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

如果你只需要這樣的功能，我建議去了。

Answer 5

我使用 media =「only screen and（min-width：750px）」href =「... css file for wide windows」 media =「only screen and（max-width：751px）」href = 「...手機的css文件」

當我左右移動右邊的窗口邊框來增加和減小窗口大小時，我的網頁瀏覽器會自動從寬窗口切換到手機。我不必包含任何Javascript代碼來檢測窗口寬度。這適用於Windows和Macintosh計算機上的Chrome，Firefox和Internet Explorer。

Answer 6

寫下來的原因莫名其妙地沒有回答這些問題給予這樣的現代化的最佳實踐方式：

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

Answer 7

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

否則

window.addEventListener("resize") 

隨着窗口大小調整正在進行，整個時間都會啓動。 這將會消耗你的CPU開銷。