今日はちょっとWebネタを。
少し前だと、iPhone Safariでスクロール時にアドレスバーが出て、
resizeイベントが発火してしまう、うーん、あ、orientationchangeイベントだ！
ってありましたが、Androidも同じアドレスバーが出る仕様になって、もう久しいわけですが。
たまに忘れて、あれ？って時があるので備忘録の意味も込めて、縦横変更時の処理を。
まず、やりたいこととしては、
iOS、Androidともに縦横を変更した際に、何らかの処理を実行したい。
ま、よくあるのは、window幅に合わせてサイズを変更する時ですね。
横表示にして小さいのはまだ許容範囲ですが、縦表示にしてはみ出てしまうのは恥ずかしい…
ということで、resizeイベントを仕掛けて…
と、それだと前述したようにスクロール時にアドレスバーが出るため、
スクロールする度にイベントが発火してしまいます。
そんな時は、orientationchangeイベントです。
便利ですねー。縦横の変更時にイベント発火してくれます。
これで解決。
…と、思いきや、そんなに甘くない。
もちろん処理の内容によっては、これで良いのですが、
Androidで、例えば、縦横変更時に変更後のwindow幅を取得して、それを利用した処理を書くとします。
残念、奥様。
Androidの処理の流れは、
縦横変更する
↓
orientationchangeイベント発火
↓
windowオブジェクトが更新される
↓
resizeイベント発火
↓
縦横が変更される
そう、つまり、orientationchangeイベントだと、
変更前のwindowオブジェクトが取得されるのです。
なので、変更後のwindow幅を取得したくても、orientationchangeでは出来ないのです。
ですので、やっぱり見慣れたresizeイベントを利用しよう、って結論に達します。
元さやにおさまる感じですね。
で、それを書くと↓な感じになります。
var beforeWW = jQuery(window).width();
var evt = (iPad || iPhone) ? 'orientationchange' : 'resize';
jQuery(window).on(evt, function(){
var afterWW = jQuery(window).width();
if (beforeWW == afterWW)
return;
else
beforeWW = afterWW;
縦横変更時に実行させたい処理をココに書く
}):
まず、最初の読み込み時のwindow幅を格納しておきます。
var beforeWW = jQuery(window).width();
続いて、閲覧デバイスによってイベントを振り分けます。
iOS系は、orientationchangeイベント。
それ以外（Android）は、resizeイベント。（Windows Phoneは？とか聞かないでｗ
var evt = (iPad || iPhone) ? 'orientationchange' : 'resize';
※iPadとiPhoneなどの判定は、window.navigator.userAgentを使って下さい。
以下が、まとまってますよ。
userAgentでブラウザ＆デバイス判別 2017年版
そして、イベントを仕掛けます。
onは本当に便利ですね。
jQuery(window).on(evt, function(){
で、イベント発火時、つまり縦横変更後のwindow幅を取得します。
var afterWW = jQuery(window).width();
そして、変更前と変更後の幅を比較します。
同じなら何もせずreturnします。
異なる場合は、変更後のwindow幅を変更前の変数に上書きしておきます。
if (beforeWW == afterWW)
return;
else
beforeWW = afterWW;
あとは、縦横変更時に実行させたい処理を書いておけば万事OKといった感じです。
ま、書くと簡単なのですが、忘れてると、あれ？あれ？ってなるんでね。
てな感じで、お疲れ様でした。
|
|
