[jQuery] レスポンシブなページで、ブラウザ幅が変わった時にリロードする
大前提として、ブラウザ幅を途中で切り替えるなんて想定してねぇ！
って方は別にいいんですが、スマホやタブレットでも横置き縦置きの違いがありますので、その都度要素を消したりしているとどうも表示が崩れてくるときがあります。
いちいちdisplay:none; display:block・・・と記述してあげるのもいいんですが、あまりにも大規模な修正だと面倒くさい。。。
どうするか？そうだ！リロードだ！
リサイズでリロード！
ということで調べたんですが、意外と面倒だったので残しておきます。
結論を急ぎたい方にまずは答えから。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var timer = 0; var currentWidth = window.innerWidth; $(window).resize(function(){ if (currentWidth == window.innerWidth) { return; } if (timer > 0) { clearTimeout(timer); } timer = setTimeout(function () { location.reload(); }, 200); }); |
リロード
まず、リロードの手段としては、
|
1 |
location.relode(); |
を使う方法と、
|
1 |
location.href = location.href; |
があったんですが、location.href = location.href は動作したんですがなんか気持ち悪い。
location.relode();は、使う場所によってうまく動かない・・・という問題がありました。
リサイズ
リサイズした時に〜というのは、
|
1 2 3 |
$(window).resize(function() { ・・・ } |
になります。
ただこれだと、マウスでブラウザ幅をいじっている途中でもリロードがかかってしまう。。。ということで
こちらのサイトにあったように指定時間経過した後に動作する案を採用しました。
スマホ対応
ところがどっこい、スマホ表示した際にスクロールするたびにリロードがかかってしまう。
なぜだろうと調べてみたら、どうもスクロールバーの影響らしいです。
知ってる？ iOS Safariでスクロールしただけでリサイズイベントが発生する原因と対処法http://qiita.com/tonkotsuboy_com/items/d32ec6e7a1f6f592d415
そのため、一度ウィンドウ幅を変数に入れておいて、値が変わったかどうかを判別させる必要がありました。
それがこの部分
|
1 2 3 4 5 6 |
var currentWidth = window.innerWidth; window.addEventListener("resize", function() { if (currentWidth == window.innerWidth) { return; } }); |
結論
というわけで、これらを合わせて
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var timer = 0; var currentWidth = window.innerWidth; $(window).resize(function(){ if (currentWidth == window.innerWidth) { return; } if (timer > 0) { clearTimeout(timer); } timer = setTimeout(function () { location.reload(); }, 200); }); |
で、無事解決しました。
