我知道现在回答这个问题有点晚了，但我希望这对有类似问题的人有所帮助。当页面因任何原因刷新时，它也可以工作。

$(document).ready(function(){

if ($(window).width() < 960 && $(window).load()) {
        $("#up").hide();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }

$(window).resize(function() {
    if ($(window).width() < 960 && $(window).load()) {
        $("#up").hide();
    }
    else{
        $("#up").show();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }
    else{
        $("#up").show();
    }

});});

我对使用香草JS的问题的解决方案是，

window.addEventListener("load", function () {
  if (window.innerWidth < 960) { doSomething(); }
}

这是可行的，但有一个问题，每当在开发工具中调整屏幕大小时(这对开发人员来说是一件常见的事情)，函数所做的事情将不会被触发。

例如，如果我们在屏幕大小超过1000px的计算机上显示网页，函数将不会被触发，当我们将窗口大小调整到小于目标(这里是960px)时，我们期望事件被触发，但这并没有发生。

当脚本文件已经被处理和完成并且不会被重新读取时，所以我们需要在调整屏幕大小时触发一个事件，并使用“addEventListener”处理该事件，就像这样;

window.addEventListener("resize", (e) => {
  const windowWidth = window.innerWidth;
  if (windowWidth > 960) { doSomething(); }
  if (windowWidth < 960) { doSomething(); }
});

最好的做法是在项目中结合这两个代码片段。

你也可以用javascript来使用媒体查询。

const mq = window.matchMedia( "(min-width: 960px)" );

if (mq.matches) {
       alert("window width >= 960px");
} else {
     alert("window width < 960px");
}

简单干净的解决方案使用香草JavaScript

let app = document.getElementById('app') const changeColorFn = ( app, color ) => { app.setAttribute("style",`background: ${color}`) } const winSizeFn = ( winWidth, callback, app, color ) => { if (window.innerWidth < winWidth ) { callback(app, color); } } winSizeFn( '1200', changeColorFn, app, 'red' ) winSizeFn( '800', changeColorFn, app, 'green' ) winSizeFn( '500', changeColorFn, app, 'blue' ) window.addEventListener("resize", (e) => { // add winSizeFn here if you want call function on window resize }) <div id="app">My app content</div>

试试这段代码

if ($(window).width() < 960) {
 alert('width is less than 960px');
}
else {
 alert('More than 960');
}

If ($(window).width() < 960) { 警报('宽度小于960px'); ｝ 其他{ alert('大于960'); ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本>

你可能想把它和一个resize事件结合起来:

 $(window).resize(function() {
  if ($(window).width() < 960) {
     alert('Less than 960');
  }
 else {
    alert('More than 960');
 }
});

R.J。:

var eventFired = 0;

if ($(window).width() < 960) {
    alert('Less than 960');

}
else {
    alert('More than 960');
    eventFired = 1;
}

$(window).on('resize', function() {
    if (!eventFired) {
        if ($(window).width() < 960) {
            alert('Less than 960 resize');
        } else {
            alert('More than 960 resize');
        }
    }
});

我尝试http://api.jquery.com/off/没有成功，所以我使用eventFired标志。