みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

スマートフォンブラウザのリサイズイベントのタイミングを探る

iOS9.3のiPhone6、Android6.0のNexus 5Xをつかってスマートフォンブラウザのリサイズイベントのタイミングを調べました。


リサイズイベント発火タイミング

デバイス回転時

デバイスのオリエンテーションを変化させるとブラウザの理財図イベントが発火します。

ページスクロール時

ページスクロールに伴い、ヘッダーの大きさが変化した際もリサイズイベントが発火します。

キーボード呼び出し時(Androidのみ)

Androidではキーボードを呼び出した際にリサイズイベントが発火します。
また、余談ですがiOSではキーボードを呼び出した際に position: fixed の要素が absolute的な挙動になりました。


リサイズイベントが発火せずにwindow.innerWidth、window.innerHeightが変化するタイミング

画面拡大率変更時

スマートフォンの画面を拡大縮小すると window.innerWidth , window.innerHeight の値が変化します。
いままで user-scalable=no で実装することが多かったので気づいてませんでした。


DEMO

jsrun.it

リサイズイベントが発火するとヘッダーが赤く点滅します。(イベントはスタックします)