javascript - メディアクエリと Javascript

Question

画面の解像度が下がったときにスクリプトを変更したい。「screen.width」の使用について何かを読みましたが機能しませんでした。

これが私のスクリプトコードです...

    $(function() {    
         $("div.holder").jPages({
             containerID: "itemContainer",
             keyBrowse   : true,
             perPage : 5     
         }); 
    });

たとえば、画面の解像度が 600 ピクセル未満の場合、投稿を 2 つだけ表示したいとします。

ありがとう！

Answer 1

resizeイベントにハンドラーをアタッチできます。jQueryを使用しているようです：

$(function() {    
    $("div.holder").jPages({
        containerID: "itemContainer",
        keyBrowse   : true,
        perPage : 5     
    }); 

    $(window).resize(function() {
        if(window.innerWidth < 600){
            // change perPage to 2 here
        }
    });
});

jQuery の .resize() メソッドのドキュメント - http://api.jquery.com/resize/

Answer 2

braicanが言及したように、サイズ変更イベントハンドラーを使用できます。ただし、スロットルで結ぶことをお勧めします。

もう 1 つのオプションは、mediaCheck (matchMedia の単なるラッパー) を使用することです。