我建议不要使用jQuery来做这样的事情，而是继续使用window.innerWidth:

if (window.innerWidth < 960) {
    doSomething();
}

use

$(window).width()

or

$(document).width()

or

$('body').width()

使用jQuery获取窗口的宽度。

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

我对使用香草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(); }
});

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

// Adds and removes body class depending on screen width.
function screenClass() {
    if($(window).innerWidth() > 960) {
        $('body').addClass('big-screen').removeClass('small-screen');
    } else {
        $('body').addClass('small-screen').removeClass('big-screen');
    }
}

// Fire.
screenClass();

// And recheck when window gets resized.
$(window).bind('resize',function(){
    screenClass();
});

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

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

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