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存储为最后的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);
}

检测浏览器窗口何时从一定大小调整为更大尺寸？

2 个答案: