PR

[jQuery]再読込み&ブラウザサイズ変更時に表示サイズで処理分木する方法

スポンサーリンク

サイトをレスポンシブデザイン化する時などに、
ページが再読込みされた時と、ブラウザのサイズが変わった時のページ表示サイズで、任意の処理を設定できればかなり便利。

で、以下がその方法。

$(window).on('load resize', function(){
    if($(window).width() <= 780){
        //処理1
    }
    else if($(window).width() <= 640){
        //処理2
    }
    else{
        //処理3
    }
});

 

この例では、再読込み&ブラウザサイズ変更時に、ページ表示サイズが780px以下であれば「処理1」を。
640px以下であれば「処理2」を。その他のサイズであれば「処理3」をする、というコードを書いている。

もちろん、数値や不等号を変えたり、分木の数を増減させるのは自由。

最近ハヤリのモバイルフレンドリーなサイトを作成する際に最適な方法かと思われ。

コメント