Window 调整大小事件

Question

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

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

所以我想运行函数 mobileResponsiveCheck() 每次用户调整大小以及重新加载时。在调整大小时，如果 window 小于 768px 那么它应该什么都不做。但这只有在我小于 768px 后重新加载它时才会发生。我想要的是 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();

Window 调整大小事件

Window resize event

javascript

jquery

responsive