it-swarm.com.de

jQuery - Ausführen von Skripten basierend auf der Bildschirmgröße

Ist es möglich, bestimmte jQuery-Skripte nur dann auszuführen, wenn die Bildschirm-/Gerätegröße über xxx Pixel liegt?

So möchte ich beispielsweise eine Diashow nur ausführen, wenn die Site auf Geräten angezeigt wird, die größer als 1024 Pixel sind. Wenn jemand ein Handy besucht, sollen alle Bilder übereinander gestapelt angezeigt werden.

21
Dean Elliott

Sie können $(window).width() verwenden

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

Demo --->http://jsfiddle.net/fh2eC/1/

63
Mohammad Adil

Wenn Sie die Größe der Breite überprüfen möchten, nachdem die Größe des Fensters geändert wurde, gehen Sie wie folgt vor:

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

Sie könnten auch eine Bibliothek wie https://github.com/paulirish/matchMedia.js/ in Betracht ziehen

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

Verwenden Sie einfach Folgendes:

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

Dies funktioniert, aber denken Sie daran, das Skript nicht am Anfang, sondern am Ende Ihrer Seite einzufügen, da sonst gemischte Ergebnisse erzielt werden. Ich würde es auch vermeiden, es in einem document.ready () -Ereignis zu verwenden, wenn Sie vorhaben, damit Stile jeglicher Art anzuwenden, da es zu einer geringfügigen, aber merklichen Verzögerung bei der Anwendung dieser Stile kommen kann.