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

URL: https://webrandum.net/javascript-resize-ios-safari/
公開日: 2021-01-30
更新日: 2022-02-05
カテゴリー: コーディング
タグ: JavaScript, Safari
出典: Webrandum（著者: サイトウ マサカズ）

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

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

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

## 発生する現象

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

![iOS Safariの下スワイプ時にアドレスバーが小さくなる](https://webrandum.net/mskz/wp-content/uploads/2021/01/image_1-8.png)

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

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

基本的にスマホ表示でリサイズ関連の処理は不要なので、`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`で中断するように指定した場合は、忘れずにこちらも指定しておきましょう。