前提条件
開発中の Expo Web をビルド( npx expo export:web )してローカルでサービスを提供 ( npx serve web-build --single ) します。
$ npx expo export:web Exporting with Webpack... Compiled with warnings asset size limit: The following asset(s) exceed the recommended size limit (586 KiB). This can impact web performance. Assets: static/media/MaterialCommunityIcons.5d42b4e60858731e7b65.ttf (1.09 MiB) static/js/846.fcc4abd9.js (893 KiB) ... $ npx serve web-build --single ┌───────────────────────────────────────────┐ │ │ │ Serving! │ │ │ │ - Local: http://localhost:3000 │ │ - Network: http://192.168.11.12:3000 │ │ │ │ Copied local address to clipboard! │ │ │ └───────────────────────────────────────────┘
※ Expo Webアプリ開発の全体の記事はこちら！
iOS Safari で実行中の Expo プロジェクトを開く
前提条件の結果、http://192.168.11.12:3000 リンクに接続可能な状態だとします。（⬆︎）
iPhone などでこのリンクを Safari で開いておきます。
デバイスを Apple コンピュータに接続する
USBケーブルを使用してその iPhone を MacBook などに接続します。
パソコンで Safari を開き、[開発] > [デバイス] > [ホスト] に移動する
※ MacBook などで Safari を開いたときに 開発 メニューが見当たらない場合の対応方法はこちら、デバイスで Webインスペクタを有効にする 方法は こちら をご覧ください。
Safari 192.168.11.12 のように表示されるので、クリックして Webインスペクタ を起動します。( IP アドレスは環境によって異なります。)
警告有無を確認する
❶ Webインスペクタ ログに「onLayout は ResizeObserver に依存しています…」という警告がないことを確認します。
警告がないことを確認する⬆︎
❷ iPhone などで Expo Web プロジェクトのリンクを Safari で開きます。
デバイスを横 <–> 縦 向きに変えながら画面の高さや幅が問題なく表示されるか確認します。
あとがき
経験上、このポリフィルを適用する前はデバイスを縦から横向きに変えたら、画面の高さが縦の時の高さのままでした。適用後はもちろんクリアです！
コメント