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

Question

画面/デバイスのサイズが xxx ピクセル幅を超える場合、特定の jQuery スクリプトのみを実行することは可能ですか?

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

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() イベント内での使用は避けます。スタイルの適用にわずかではあるが顕著な遅延が発生する可能性があるため、何らかのスタイルを適用するために使用する予定がある場合。