iPhoneでスクロールするとresizeイベントが発生してしまう問題

スマートフォンサイトでresizeイベントというと、画面を回転させた時くらいであまり使う場面はないように思えますが、レスポンシブサイトなんかでは意外と頻繁に使ったりすることもあるかと思います。
そんな時に陥るのがスクロール時にresizeイベントが発生してしまう問題。

iPhoneのsafariでスクロールすると上下のバーが引っ込むんですよね。
このときにどうやらresizeイベントが発生してしまうようです。

$(window).on('resize', function(){
  // リサイズ時に実行したい処理
});

例えばこんなjQueryを書いたとしたら、スクロールして上下のバーが出たり引っ込んだりするたびにイベントが発生してしまいます。
実際にウィンドウサイズが変更された時だけ発生させたい場合はもちろん、そうじゃなくても無駄なイベントが実行されるのはあんまり気持ちのいいものじゃありません。

そんなときは “orientationchange” を使いましょう。

const ua = navigator.userAgent;
if((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') === -1) || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0){
  eventName = 'orientationchange';
}else{
  eventName = 'resize';
}
$(window).on(eventName, function(){
  // リサイズ時に実行したい処理
});

上記のように記述すれば、スマートフォンでのアクセス時のみorientationchangeイベント、それ以外では普通のresizeイベントが実行されるようになります。

iOSとAndroid両方に対応しているので、今後はresizeの代わりにorientationchangeを使っていきましょう。