Doe iets als het schermbreedte kleiner is dan 960 px

Hoe kan ik jQuery iets doen als mijn schermbreedte minder is dan 960 pixels? De onderstaande code vuurt altijd de 2e waarschuwing, ongeacht mijn raamgrootte:

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

Antwoord 1, Autoriteit 100%

Gebruik jQuery om de breedte van het raam te krijgen.

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

Antwoord 2, Autoriteit 30%

Mogelijk wilt u het combineren met een grootte van de grootte:

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

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

Ik probeerde http://api.jQuery.com/off/ zonder succes, dus ik ging met de EvenementFired Flag .

Antwoord 3, Autoriteit 9%

Ik raad aan om jQuery niet voor zoiets te gebruiken en door te gaan met window.innerWidth:

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

Antwoord 4, autoriteit 3%

U kunt ook een mediaquery gebruiken met javascript.

const mq = window.matchMedia( "(min-width: 960px)" );
if (mq.matches) {
       alert("window width >= 960px");
} else {
     alert("window width < 960px");
}

Antwoord 5, autoriteit 2%

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

Antwoord 6, autoriteit 2%

Ik stel voor (jQuery nodig):

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

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

Dan kun je eenvoudig de breedte van het venster krijgen met de var: windowWidth
en Hoogte met: vensterHoogte

krijg anders een js-bibliotheek:
http://wicky.nillia.ms/enquire.js/

Antwoord 7, autoriteit 2%

gebruik

$(window).width()

of

$(document).width()

of

$('body').width()

Antwoord 8, autoriteit 2%

Ik weet dat ik laat ben om dit te beantwoorden, maar ik hoop dat het van enig nut is voor iedereen die een soortgelijk probleem heeft. Het werkt ook wanneer de pagina om welke reden dan ook wordt vernieuwd.

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

Antwoord 9

Probeer deze 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>

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