窗口调整大小事件

Question

var windowWidth = $(window).width();    
function mobileResponsiveCheck(){
    if(windowWidth >= 768){
        box3Responsiveness();
    }else if(windowWidth < 768){
        null;
    }
}

$(window).resize(function(){
    mobileResponsiveCheck();
});
mobileResponsiveCheck();

所以我想每次用户调整大小以及重新加载时都运行功能mobileResponsiveCheck（）。 调整大小时，如果窗口小于768px，则它什么也不做。 但这只会在小于768像素后重新加载时发生。 我想要的是box3Responsiveness（）在用户调整大小时停止并在不重新加载的情况下达到768px以下。

Answer 1

您全局定义了windowWidth 。 变量设置一次，即脚本首次运行时。 但是，该值在调整大小时不会更改，因为您不告诉它。 要更改此设置，请将变量声明带入函数中。 这样，它将始终在必要时更改。

function mobileResponsiveCheck(){
    var windowWidth = $(window).width();  
    if(windowWidth >= 768){
        box3Responsiveness();
    }
}

$(window).resize(function(){
    mobileResponsiveCheck();
});
mobileResponsiveCheck();

Answer 2

mobileResponsiveCheck() {
  if (window.innerWidth >= 768){
    box3Responsiveness();
  }
}

window.addEventListener('resize', mobileResponsiveCheck);
mobileResponsiveCheck();