0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JSでresizeイベントを使うときの注意点

Last updated at Posted at 2021-10-07

Webページでウィンドウサイズが変化したときに何か処理をさせるのに便利な

window.addEventListener("resize", function() {});

ですが、

このまま素の記述で実装してしまうと、スマホのブラウザで表示したときにURLのバーが伸び縮みする動作もウィンドウサイズが変更されたと判定されてしまうので、単にスクロールしただけでイベントが発火してしまいます。
(例:ウィンドウサイズが変更されたときにページをリロードするように記述していた場合、スクロールしてURLバーのサイズが変わるたびにリロードされてしまう。)

これはPCブラウザのレスポンシブモードでは確認できない現象なので注意が必要です。


「ウィンドウサイズの変化」とは少し性質が違いますが、 例えばスマホ画面の縦・横の向きが変化したときに処理を発火したい場合などは、
window.addEventListener("orientationchange", function() {});

を使う方がいいかもしれません。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?