Javascript 如果屏幕宽度小于 960 像素，请执行某些操作

Do something if screen width is less than 960 px

提问by Evanss

How can I make jQuery do something if my screen width is less than 960 pixels? The code below always fires the 2nd alert, regardless of my window size:

如果我的屏幕宽度小于 960 像素，我如何让 jQuery 做一些事情？无论我的窗口大小如何，下面的代码总是会触发第二个警报：

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

    alert('More than 960');
}

回答by aziz punjani

Use jQuery to get the width of the window.

使用 jQuery 获取窗口的宽度。

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

回答by jk.

You might want to combine it with a resize event:

您可能希望将其与调整大小事件结合使用：

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

For R.J.:

对于 RJ：

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');
        }
    }
});

I tried http://api.jquery.com/off/with no success so I went with the eventFired flag.

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

回答by Daniel Kmak

I recommend to not use jQuery for such thing and proceed with window.innerWidth:

我建议不要将 jQuery 用于这样的事情并继续window.innerWidth：

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

回答by Daniel Kmak

You can also use a media query with javascript.

您还可以使用带有 javascript 的媒体查询。

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

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

回答by moabi

I would suggest (jQuery needed) :

我建议（需要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 !');
  }
});

Added in CodePen : http://codepen.io/moabi/pen/QNRqpY?editors=0011

在 CodePen 中添加：http://codepen.io/moabi/pen/QNRqpY?editors=0011

Then you can get easily window's width with the var : windowWidth and Height with : windowHeight

然后，您可以使用 var 轻松获得窗口的宽度：windowWidth 和 Height 使用：windowHeight

otherwise, get a js library : http://wicky.nillia.ms/enquire.js/

否则，获取一个 js 库：http: //wicky.nillia.ms/enquire.js/

回答by leymannx

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

回答by Guard

use

用

$(window).width()

or

或者

$(document).width()

or

或者

$('body').width()

回答by Veljko Stefanovic

I know i'm late to answer this, but i hope it is of some help to anybody who have similar problem. It also works when page refreshes for any reason.

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

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

});});

回答by JIBIN BJ

Try this code

试试这个代码

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>

回答by Saurav Chaudhary

nope, none of this will work. What you need is this!!!

不，这些都行不通。你需要的是这个！！！

Try this:

尝试这个：

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