检测浏览器 window 何时从特定大小调整为更大的大小？

Question

我想在浏览器 window 从小于 641 像素的任何尺寸调整到更大尺寸后重置特定元素。这是我试图实现的一个例子，用伪代码编写：

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

谢谢！

Answer 1

尝试 window.onresize 事件：

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

您可以使用 window.innerHeight 和 window.innerWidth 获取浏览器 window 的当前尺寸：

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

Answer 2

为了这个问题，我假设你的宽度是 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 存储为最后一个，用于下一次调整大小。

检测浏览器 window 何时从特定大小调整为更大的大小？

Detect when browser window has been resized from certain size to a larger size?

javascript

browser

resize

window-resize