jQueryで画面のリサイズ時やスマホの回転時に処理を行う方法 | 東京都世田谷区 ホームページ制作 [k]id

jQueryで画面のリサイズ時やスマホの回転時に処理を行う方法

Category WEB Tips Update 2015.07.02

jq-resize
twitterfacebookgoogle+はてなブックマークPocketであとで読むfeedlyで購読

jQueryで画面のリサイズ時の処理

jQueryで画面サイズの変更時の対応は通常はresizeにて処理をしていましたが、
レスポンシブWEBデザインで実装する場合にスマートフォンの回転も考慮しなければなりません。

PC スマホ両対処する方法

下記にて
・PCの画面リサイズ時
・スマートフォンの回転時
の処理を一括して処理ができます。

var timer = false;
$(window).on("orientationchange resize",function(){
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
//console.log('ここに実行したい処理を記述');
}, 100);
});

解説

1行目

連続読み込みをさせないようにタイマー変数を宣言します。

2行目

window onにて
PC … resize
スマートフォン … orientationchange
それぞれの動きを判定させます。

3行目〜5行目

後記するsetTimeoutにて指定した時間中は連続実行させなくします。

7行目

実行したい処理を記述します。

ページトップへ