當瀏覽器窗口從特定尺寸調整爲較大尺寸時檢測到？

Question

我想在瀏覽器窗口從小於641px的任何大小調整到更大的大小後重置特定元素。下面是我試圖實現的一個例子，用僞代碼編寫：

if (browser.window <= 641px && browser.window.resizedTo > 641px) { 
    $(".foo").removeClass("bar") 
} 

謝謝！

Answer 1

我會承擔這個問題的緣故你的意思是641px的寬度，但我也留下了innerHeight變量，以防萬一你需要它：

// Closure last-height/width 
var lastX = window.innerWidth 
var lastY = window.innerHeight 

function fooOnResize() { 
    var x = window.innerWidth 
    var y = window.innerHeight 
    if (lastX <= 641 && 641 < x) { 
     $(".foo").removeClass("bar") 
    } 
    lastX = x 
    lastY = y 
} 

window.addEventListener("resize", fooOnResize) 
// Also okay: window.onresize = fooOnResize 

訣竅是基本上保持最後大小的一些閉包變量，然後在調整大小，你可以進行比較。在完成比較和工作後，將當前的x/y存儲爲最後一個，作爲下一個調整大小。

Answer 2

嘗試window.onresize事件：

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize

可以使用window.innerHeight和window.innerWidth得到瀏覽器窗口的當前尺寸：

window.onresize = function() { 
    console.log('height: ' + window.innerHeight); 
    console.log('width: ' + window.innerWidth); 
}