WebアプリケーションのiOS12.2対応ブログWebアプリケーションのiOS12.2対応3月末にiOS12.2がリリースされました。弊社ではブラウザ上で動作するデジタルカタログ等のWebアプリケーションの開発をしていますが、iOSやAndroidのバージョンが変わるとブラウザの動作も結構変わるので、アプリケーションの修正作業が必要になることが多くあります。今回は、iOS12.1から12.2へのマイナーバージョンアップでしたが、微妙な違いがあり、何箇所かアプリケーションを修正しなければいけない箇所がありました。そのうちの一つ、端末(iPhone7/8)の向きを変えた時のSafariの挙動の違いについて説明したいと思います。iOS12.2で端末の向きを横から縦にした時の違い通常、iPhone7/8のSafariではスクロール位置がページ最上部の場合は図1のようにアドレスバーと画面下部にステータスバー(?)が表示されています。iOS12.1では端末の向きを横から縦にした時に図1のようなアドレスバーとステータスバーが表示された状態に戻りますが、iOS12.2では図2のようにアドレスバーと画面下部のステータスバーが非表示状態になります。アドレスバーとステータスバーの表示なしこれ自体は問題ないのですが、iOS12.2において横→縦のorientationchangeイベント後にwindow.innerWidth,window.innerHeightからウィンドウサイズを取得すると、正しい高さを取得できません。具体的には図3のようにアドレスバー、ステータスバーが表示されている状態の高さが返されます。余白が出来てしまいます(図3右)。iOS12.2で取得されるサイズ上記の現象を確認するためのHTMLのサンプルが以下のようになります。簡単に動作を説明すると、resize,orientationchangeイベントが発生すると、window.innerWidth,window.innerHeightからウィンドウサイズを取得し、背景のグレーのエリアをウィンドウサイズいっぱいに覆うようにリサイズしています。</body></html>上のHTMLではイベント毎にログを出力するようにしているので、ログを確認してみます。端末の向きを横→縦に変更した時に、iOS12.1で出力されるログは以下のようになります。pxのサイズが取得できています。このサイズはウィンドウサイズとして正しい値なので、グレーのエリアを画面いっぱいに正しくリサイズできます。onorientationchange:375x553一方、iOS12.2では以下のようになります。pxのサイズが返されています。pxに合わせてサイズ調整すると、画面下に余白ができることになります。onresize:375x553原因は何かwindow.innerHeightが実際のウィンドウサイズと異る原因はなんでしょうか?調べていくと、resizeイベント直後のwindow.innerHeightは誤った値になっていますが、しばらくしてからwindow.innerHeightにアクセスすると正常な高さを取得できるようでした。Safariの中の実装のことまではわかりませんが、iOS12.2になってからwindow.innerHeightの更新契機が変わってしまっているようです。対策として、向きを横→縦に変更した時に、iOS12.1と同じようにアドレスバーを表示した状態にできないかと色々試してみましたが難しいようでした。そこで、イベント発生後しばらくしてからなら正しい高さを取得できるので、以下のようにorientationchange後、レイアウト処理を行うまでにディレイを入れるようにしました。});ディレイを入れた場合のログは以下のようになります。リサイズしたせいでアドレスバーが表示され、resizeイベントが再度発生しているonorientationchange:375x584のログから、ディレイ後は正しい高さを取れていることがわかります。このサイズを元にグレー領域をレイアウトすれば、図3右の画面をグレー領域で覆い尽すことができます。想定外だったのは、375x584pxでグレー領域をレイアウトすると、それを契機にアドレスバーが表示され、結局図3左の状態になったことです。この時、resizeイベントは発生し、ウィンドウサイズも正しく取得できるので、結果として表示は正しく行えることになります。この対策にあたって、どれだけディレイをいれればいいのかは試してみるしかないので、あまりいい対策ではないのですが、Webアプリケーションではこのようなタイミングに依存する問題は割と発生します。iOSではバージョンによってSafariの動作がちょこちょこ変わるので、対応が結構大変なブラウザだったりします。Explorerが筆頭でしたが。動作が変るブラウザに対応していかないといけないのが、Webアプリケーション開発の難しいところです。=============弊社ではデジタルカタログ等のHTML5を使ったWebアプリケーションの開発を行っています。(1)技術的な情報は以下にもあります。