iOS Chromeでresizeイベント後にwindow.innerWidth/innerHeightが異なる問題に対するワークアラウンド
現象
iOS端末を回転させてwindow sizeが変わって、resizeイベント後にwindow.innerWidth/innerHeightを参照しても、実際の値と異なる
例えば画面を横から縦に変えた場合、widthは合っていますが、heightは異なる値を示しています
環境
- iPadOS 14.4.2
- Google Chrome 87.0.4280.77
解決案
※ どうしてもiOS Chromeでresizeしたときに実際のwindow.innerWidth/innerHeightが使いたい！ときに試す
- 画面全体を覆うダミーのdivを置く
position: fixed とか 100vw, 100vh とか - ダミーのdivをResizeObserverで監視して、divのwidth, heightを使う
検証コード
iOS Chrome resize workaround - CodeSandbox
お試し環境
実験
以下の3パターンで動きを見る
window.onresizeでwindow.innerWidth/innerHeightを参照- ダミーdivのResizeObserverで
window.innerWidth/innerHeightを参照 - ダミーdivのResizeObserverで divの
width/heightを参照
動作
iOS Chrome
縦から横に回転させた場合
正解 width: 1080 height: 695
2と3のパターンで正解のwidthをheightが取れています
iOS Safari
アドレスバーを小さくした場合
正解 width: 1080 height: 771
1と3のパターンで正解のwidthをheightが取れています
