Zrób coś, jeśli szerokość ekranu jest mniejsza niż 960 pikseli

Jak sprawić, by jQuery coś zrobił, jeśli szerokość ekranu jest mniejsza niż 960 pikseli? Poniższy kod zawsze uruchamia drugi alert, niezależnie od rozmiaru mojego okna:

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

    alert('More than 960');
}

Użyj jQuery, aby uzyskać szerokość okna.

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

Możesz połączyć to ze zdarzeniem zmiany rozmiaru:

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

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

Próbowałem http://api.jquery.com/off/ bez powodzenia, więc wybrałem flagę eventFired.

Polecam nie używać jQuery do takich rzeczy i kontynuować window.innerWidth:

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

Możesz także użyć zapytania medialnego z javascript.

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

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

Sugerowałbym (potrzebne 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 !');
  }
});

Dodano w CodePen: http://codepen.io/moabi/pen/QNRqpY?editors=0011

Następnie możesz łatwo uzyskać szerokość okna za pomocą var: windowWidth i Height z: windowHeight

w przeciwnym razie uzyskaj bibliotekę 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();
});

posługiwać się

$(window).width()

lub

$(document).width()

lub

$('body').width()

Wiem, że jestem spóźniony, aby odpowiedzieć na to pytanie, ale mam nadzieję, że pomoże to każdemu, kto ma podobny problem. Działa również, gdy strona jest odświeżana z dowolnego powodu.

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

});});

Wypróbuj ten kod

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>

nie, nic z tego nie zadziała. Potrzebujesz tego !!!

Spróbuj tego:

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