web-dev-qa-db-fra.com

Faites quelque chose si la largeur de l'écran est inférieure à 960 px

Comment faire en sorte que jQuery fasse quelque chose si la largeur de mon écran est inférieure à 960 pixels? Le code ci-dessous déclenche toujours la 2e alerte, quelle que soit la taille de ma fenêtre: 

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

    alert('More than 960');
}
jquery
180
Evans

Utilisez jQuery pour obtenir la largeur de la fenêtre. 

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

Vous voudrez peut-être le combiner avec un événement de redimensionnement:

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

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

J'ai essayé http://api.jquery.com/off/ sans succès; je suis donc allé avec le drapeau eventFired.

124
jk.

utilisation 

$(window).width()

ou

$(document).width()

ou

$('body').width()
8
Guard

Je suggère (jQuery nécessaire): 

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

Ajouté dans CodePen: http://codepen.io/moabi/pen/QNRqpY?editors=0011

Vous pouvez alors obtenir facilement la largeur de la fenêtre avec var: windowWidth Et Height avec: windowHeight 

sinon, obtenez une bibliothèque js: http://wicky.nillia.ms/enquire.js/

8
moabi

Je sais que je suis en retard pour répondre à cette question, mais j'espère que cela aidera quelque chose pour tous ceux qui ont le même problème. Cela fonctionne également lorsque la page s'actualise pour une raison quelconque. 

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

});});
6
Veljko Stefanovic
// 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();
});
6
leymannx

Vous pouvez également utiliser une requête multimédia avec javascript. 

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

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

Essayez ce 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>

0
JIBIN BJ

Je recommande de ne pas utiliser jQuery pour une telle chose et de continuer avec window.innerWidth:

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