サイトをレスポンシブデザイン化する時などに、
ページが再読込みされた時と、ブラウザのサイズが変わった時のページ表示サイズで、任意の処理を設定できればかなり便利。
で、以下がその方法。
$(window).on('load resize', function(){ if($(window).width() <= 780){ //処理1 } else if($(window).width() <= 640){ //処理2 } else{ //処理3 } });
この例では、再読込み&ブラウザサイズ変更時に、ページ表示サイズが780px以下であれば「処理1」を。
640px以下であれば「処理2」を。その他のサイズであれば「処理3」をする、というコードを書いている。
もちろん、数値や不等号を変えたり、分木の数を増減させるのは自由。
最近ハヤリのモバイルフレンドリーなサイトを作成する際に最適な方法かと思われ。
コメント