Зробіть щось, якщо ширина екрана менше 960 пікселів

Як змусити jQuery щось робити, якщо ширина мого екрана менше 960 пікселів? Код нижче завжди викликає друге попередження, незалежно від розміру мого вікна:

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

    alert('More than 960');
}

Використовуйте jQuery, щоб отримати ширину вікна.

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

Ви можете поєднувати його з подією зміни розміру:

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

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

Я спробував http://api.jquery.com/off/, не маючи успіху, тому я пішов з прапором "Постріл".

Я рекомендую не використовувати jQuery для подібних дій і продовжувати window.innerWidth:

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

Ви також можете використовувати медіа-запит за допомогою JavaScript.

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

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

Я б запропонував (потрібний 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

Тоді ви можете легко отримати ширину вікна за допомогою var: windowWidth та Height with: windowHeight

в іншому випадку отримайте бібліотеку js: http://wicky.nillia.ms/enquire.js/

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

використання

$(window).width()

або

$(document).width()

або

$('body').width()

Я знаю, що спізнююсь відповісти на це, але сподіваюся, що це допоможе тому, хто має подібні проблеми. Він також працює, коли сторінку оновлюють з будь-якої причини.

$(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>

ні, нічого з цього не вийде. Що вам потрібно, це !!!

Спробуйте це:

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