Help us understand the problem. What is going on with this article?

WebViewアプリをiPhone X対応させる際のハマりどころなど

More than 1 year has passed since last update.

TL;DR

  • 今までステータスバーを20pxとしていた場合はconstantenvを追加で書きましょう
  • viewportは忘れず書きましょう
  • UIWebViewのバグがなかなかつらいのでWKWebViewに移行しましょう

はじめに

今年のMashupAwardsで応募した「IoT」のiOSアプリの実装はほとんどWebViewです。
このアプリを作っている途中にiPhone Xが発売されて、対応するときにハマった点などを書きました。

今回iPhone X対応させるアプリについて

スクリーンショット 2017-12-17 0.27.48.png

こんな感じのなんてことないアプリです。
全面にWebViewをベタッと貼って、WebViewJavascriptBridgeを使ってネイティブとデータのやり取りを行います。

Safe Areaについて

iOS 11から新しく導入された概念です。
iPhone 8では以下の画像のようにステータスバー以外の領域がSafe Areaとなります。
iphone8-safe-area.png

iPhone Xではステータスバーとホームインジケーター以外の領域がSafeAreaです。
iphonex-safe-area.png

ちなみに横画面にすると、センサーハウジングが横にくる都合上、横に空白ができます。

下側のホームインジケーターまわりはそのままです。
iphonex-safe-area-landscape.png

iPhone XのCSS対応

今まではステータスバーが絶対に20pxだったので、CSSでも決め打ちで書いていることが多かったですが、
iPhone Xが発売されてしまった以上そうするわけにはいきません。
ということで…

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
.content {
  padding-top: 20px;/* iOS 10 以下の互換性を保つために20px */
  padding-top: constant(safe-area-inset-top);/* iOS 11.2未満用 */
  padding-top: env(safe-area-inset-top);/* iOS 11.2以上用 */
}

と書けばいい感じになりそうです。
今回はCSSについて深く掘り下げていきます。

constantとenvについて

WebKitのブログにもあるように、
iPhone Xで変わってしまったステータスバーの高さをCSSで動的に変更できるように
constant()がiOS 11から導入されました。しかし、このconstant()が短命で
iOS 11.2からはenv()を使わなくてはいけません。なのでたくさん書きました。

書き忘れるとナビゲーションバーとタブバーがめりこみます。
スクリーンショット 2017-12-17 0.54.42.png

safe-area-inset-xxxについて

Safe Areaが画面の上下左右端からどれだけ離れているかを取得できます。
padding 以外にも margin, top, right, bottom, leftなどに使えます。
calcでも普通に使えちゃうので結構便利。

UIWebViewのバグについて

iPhone X対応する際に必須なこれらのコードですが、
UIWebViewだと画面を回転させて戻すと正しい値に更新されないバグがあります。
タブバーがめり込んでいるのがおわかりいただけるでしょうか :joy: :joy: :joy:
WKWebViewだとこのバグは発生しないので、おとなしく乗り換えましょう :pray:

yY2gWmXWQA.gif

pittanko_pta
Perfumeと乃木坂・欅坂が好きです。フロントエンドの人。
https://pittankopta.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした