jQuery - Exécute des scripts en fonction de la taille de l'écran

Question

Est-il possible d'exécuter certains scripts jQuery uniquement si la taille de l'écran/du périphérique est supérieure à xxx pixels de large?

Ainsi, par exemple, je ne veux exécuter un diaporama que lorsque les gens consultent le site sur des appareils de plus de 1024 pixels. Si quelqu'un visite sur un mobile, je veux juste que toutes les images s'affichent empilées les unes sur les autres ...

Answer 1

Vous pouvez utiliser $(window).width()

if($(window).width() >= 1024){
  // do your stuff
}

Démo --->http://jsfiddle.net/fh2eC/1/

Answer 2

Si vous souhaitez vérifier la taille de la largeur après le redimensionnement de Windows, alors:

$(window).resize(function() {
    if( $(this).width() > width ) {
        // code
    }
});

Answer 3

Vous pourriez également envisager une bibliothèque comme https://github.com/paulirish/matchMedia.js/

if (matchMedia('only screen and (max-width: 480px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?
}

Answer 4

Utilisez simplement ce qui suit:

if($(window).width() >= 1024){
    //your code here
}

Cela fonctionne, mais n'oubliez pas de mettre le script à la fin de votre page plutôt qu'au début, sinon vous finirez par avoir des résultats mitigés. J'éviterais également de l'utiliser dans un événement document.ready () si vous envisagez de l'utiliser pour appliquer des styles de toute sorte car il pourrait y avoir un léger mais notable retard dans l'application desdits styles.