如果屏幕宽度小于960 px

使用

$(window).width()

或

$(document).width()

或

$('body').width()

使用jQuery获取窗口的宽度。

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

你可能想把它和一个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标志。

不，这些都没用。你需要的是这个! !

试试这个:

if (screen.width <= 960) {
alert('Less than 960');
} else if (screen.width >960) {
alert('More than 960');
}

我建议(jQuery需要):

/*
* windowSize
* call this function to get windowSize any time
*/
function windowSize() {
windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
windowWidth = window.innerWidth ? window.innerWidth : $(window).width();


}


//Init Function of init it wherever you like...
windowSize();


// For example, get window size on window resize
$(window).resize(function() {
windowSize();
console.log('width is :', windowWidth, 'Height is :', windowHeight);
if (windowWidth < 768) {
console.log('width is under 768px !');
}
});

添加到CodePen: http://codepen.io/moabi/pen/QNRqpY?editors=0011 < / p >

然后你可以很容易地得到窗口的宽度与var: windowWidth 和高度:windowHeight

// 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();
});

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

$(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();
}


});});

试试这段代码

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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


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

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

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

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

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