tmegos blog

I love school idols / 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を使う
続きを読む

Percyをsnapshotを取らずに使いたい場合

モチベーション

方法

percy-cliを使い、画像のアップロードのみを行います

続きを読む