jQuery-画面サイズに基づいてスクリプトを実行する

Question

画面/デバイスのサイズがxxxピクセルを超える場合にのみ、特定のjQueryスクリプトを実行できますか？

そのため、たとえば、1024pxを超えるデバイスでサイトを表示しているときにのみスライドショーを実行したいと思います。誰かがモバイルにアクセスした場合、すべての画像を重ねて表示したいだけです...

Answer 1

$(window).width()を使用できます

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

デモ --->http://jsfiddle.net/fh2eC/1/

Answer 2

ウィンドウのサイズを変更した後に幅のサイズを確認する場合：

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

Answer 3

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

次を使用してください：

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

これは機能しますが、スクリプトを最初ではなくページの最後に配置することを忘れないでください。そうしないと、結果が混在することになります。また、スタイルを適用する際にわずかではあるが顕著な遅延が生じる可能性があるため、あらゆる種類のスタイルを適用するために使用する場合は、document.ready（）イベント内で使用しないでください。