tmegos blog

Web developer

iOS Chromeでresizeイベント後にwindow.innerWidth/innerHeightが異なる問題に対するワークアラウンド

現象

iOS端末を回転させてwindow sizeが変わって、resizeイベント後にwindow.innerWidth/innerHeightを参照しても、実際の値と異なる

例えば画面を横から縦に変えた場合、widthは合っていますが、heightは異なる値を示しています

f:id:tmegos:20210404161451p:plain:w400

bugs.webkit.org

環境

解決案

※ どうしてもiOS Chromeでresizeしたときに実際のwindow.innerWidth/innerHeightが使いたい!ときに試す

  1. 画面全体を覆うダミーのdivを置く
    position: fixed とか 100vw, 100vh とか
  2. ダミーのdivをResizeObserverで監視して、divのwidth, heightを使う

検証コード

iOS Chrome resize workaround - CodeSandbox

お試し環境

https://vydk9.csb.app/

実験

以下の3パターンで動きを見る

  1. window.onresizewindow.innerWidth/innerHeight を参照
  2. ダミーdivのResizeObserverで window.innerWidth/innerHeight を参照
  3. ダミーdivのResizeObserverで divのwidth/height を参照

動作

iOS Chrome

縦から横に回転させた場合

正解 width: 1080 height: 695

2と3のパターンで正解のwidthをheightが取れています

f:id:tmegos:20210404163112p:plain:w400

iOS Safari

アドレスバーを小さくした場合

正解 width: 1080 height: 771

1と3のパターンで正解のwidthをheightが取れています

f:id:tmegos:20210404163158p:plain:w400

気になる点

  • 通常はwindow.onresizeで取得できるのに、iOS ChromeのためだけにResizeObserverを使っている
  • ResizeObserverを使うためにダミーのdivが必要になる