resizeイベントを使用する場合は、iOS Safariでの挙動に注意

ウインドウをリサイズしたタイミングでJavaScriptを再度実行したりするときにresizeを使用することがあります。

window.addEventListener('resize', function() {
  // リサイズ時の処理
}, false );

PCの場合、リサイズが発火するのはユーザーが意図的にウインドウの幅を変えたときになりますが、SPの場合はスクロールの影響によって発火してしまうので注意が必要です。

発生する現象

例えば、iOS Safariでは画面を下にスワイプすると上のアドレスバーが小さくなり、その影響でブラウザの表示領域が大きくなります。

このアドレスバーが小さくなるのも「ウインドウがリサイズされた」として発火してしまいます。

スマホでは発火しないようにする

基本的にスマホ表示でリサイズ関連の処理は不要なので、resize以降の処理は条件分岐で発火しないようにしておきましょう。

スマホでは処理を中断する

resizeの中に下記のコードを追加すれば、スマホでは処理が中断されます。

let ua = navigator.userAgent;
if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) {
  return false
}

ポートレートモードに切り替えたときは発火するようにする

スマホでもポートレートモード（画面横に切り替え）にしたときは発火したい場合、イベントでorientationchangeを使うと発火できます。

window.addEventListener('orientationchange', function() {
  // ポートレートモード切り替え時の処理
}, false );

ポートレートモードでサイトを見る人はほとんどいないと思いますが、念のためresizeで中断するように指定した場合は、忘れずにこちらも指定しておきましょう。