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