みかづきブログ その3

3ヶ月つづけてみました。

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

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

iOS9検証

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