どうして書いたか
上の画像のようなほぼWebViewメインのアプリで途中で強制横表示のNative画面を開く必要があり、次に進んだ際にiphoneXだとレイアウトが崩れる現象が厄介すぎたので記録をと思い書いてみました。
なぜ対策が必要なのか
https://qiita.com/keeey/items/c175bd8ef12ee65ac3fc
↑の記事にもありますが、iphoneX(iOS11〜)よりノッチ部分やHomeIndicator（黒いバーみたいなの）部分の幅を合わせるためにWebViewの場合、CSSにpadding-top:content(safe-area-inset-top)のような指定をする必要があります。
もちろんその値は端末の向きにより決定されるので、端末が縦だったらtopに値が入ってきますし、横画面だったらtopは値が入らず0が設定されます。
では横の画面表示のまま縦表示が前提の上記のpadding-top:content(safe-area-inset-top)を読み込んだらどうなるでしょう。
答えは0が入っているのでiphoneXのノッチにHTMLの上の部分がかぶる形になってしまい、見事にバグとなります^^
ちなみに遷移してWebView側で次の画面へと更新をしている場合についてはラッキーなことに対策は不要です。
（原因は不明ですが次の画面へと更新したタイミングで縦表示と端末側が判断しているのでしょうか）
端末の種類、方向によっての各値は以下の記事で説明がありますので参考にどうぞ。
前提
- Native -> WebViewのタイミングでWeb側のJSを実行している
- 遷移したタイミングでそのページ自体を更新できない制約がある
対策
というわけでこのバグに対して対策を考えて実行してみました。同じような事象が起きた方の参考になればと思います。
ポイントとしてはどちら（WebView、Native）にどのタイミング（更新前、更新後）で処理を任せるのかということです。
1. 戻る前にNativeで強制的に画面を回転させて戻させて値を更新
これは単純に戻す前に画面の向きを縦向きに変更してからWebView側に渡す方法です。
Native画面の向き変更ですが、iOS6からiOS8にかけて変更方法が少々難しくなったようです。
下記URLを参考に実装をしてみました。
結果
おそらく時間をかけたらできるのかもしれませんが、そこまでNativeの知識があるわけではないのですぐにはできず、再検討ということに。学習コストかかるし、何してるか理解してないと更にバグを生み出すことになるのでもう少し簡単な方法がないか再検討。
2. 戻ったタイミングでNativeでWebView画面を更新する
location.reload();
そもそもなぜ進んだタイミングで画面が縦向きで更新されないのか疑問で仕方なかったのですが、Native処理終了のタイミングでWebView側を更新してあげると、正常にCSSが読み込まれることを確認できました。
結果
今回のアプリの仕様的に画面の再読込が許されていない（システムエラーとなる）のでこの方法は断念。。。
仕様だから仕方ないね。。。
3. 戻ったタイミングでWebView側でCSSの更新をする
$('hoge').css('padding-top','44px');
※jQueryが使えるPJで良かった。。。
これもWebView側に任せる処理となります。Native側でWebViewのJSを実行し特定のCSSクラスにpaddingをつけてあげるという方法。これなら戻ったタイミングでCSSをつけて解決できそうです。
結果
ですが、iphoneX以外の端末でも同じように空間が空いてしまうので断念。もちろんNative側で端末を判定してT/F値をWebView側に一緒に送信してあげればできますが、元々のJS部分の構造を変更することになるので今回は断念。
4. 戻ったタイミングでWebView側で画面の更新を行う
[webView reload];
参考サイト
結果
WebViewをreloadすることによって縦画面の値(safe-area-inset)を取得することができました。
多少もたつきはありますが、とりあえずはUIを崩さずに再表示可能になりました。
まとめ
最終的に4のNative側のコードでWebView側を更新してあげるという結果になりました。プラン1のNative側の回転処理で解決できるのが一番良かったのかもしれませんが、解決できたとしても画面が予期せぬ動きになる可能性もあるので今回は無難な解決法を選択しました。Nativeに自身のある方はぜひとも1のプランで解決をしてほしい限りです。
参考情報
http://blog-e.uosoft.net/entry/20090515/1242315011
http://niwatako.info/20120913/article1119.html
https://qiita.com/nomadmonad/items/e09639e0b31812e28d6d
https://qiita.com/keeey/items/c175bd8ef12ee65ac3fc