HTML
iPhone
Safari
ios11
iPhoneX

iPhone X(iOS11)でのapple-mobile-web-app-status-bar-style

はじめに

デジタルクエストAdvent Calendar 21日目は、デザイナーumiが担当いたします。

最近AMPでいい感じの見た目のサイトを作ってみたり、PWA+AMPを試してみたりがマイブームなので、それについて……と考えていたのですが、遅ればせながらiPhone Xが手に入ったので、iOS11iPhone Xでのapple-mobile-web-app-status-bar-styleについて書きたいと思います。

apple-mobile-web-app-ほにゃららとは

apple-mobile-web-app(正式名称なんていうのでしょうか)というのは、<head></head>内に

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="タイトル">

等と書いておいて、そのWebページをiOSのSafariから「ホーム画面に追加」し、ホーム画面に置かれたアイコンをタップすると、Safariのアプリではなくフルスクリーンで単体のアプリ風に立ち上げてくれます。

このWebアプリモードにするmetaタグは以前からあったのですが、iOSがアップデートされるにつれて表示がおかしくなったり、効かなくなったり……したんでしたっけ? 個人的には使用する機会がなくすっかり忘れていました。

iPhone Xのノッチ部分の表示はどうなる?

apple-mobile-web-app-status-bar-styleによるステータスバーのちがいをおさらい

apple-mobile-web-app-status-bar-stylecontentに指定できるものはdefault black black-translucentで、それぞれステータスバー部分の背景色が変わります。

まずは手元にあるiPhone 6s(iOS 11)の表示を掲載します。
※右はページを少しスクロールした状態のスクリーンショットです。

iPhone 6sでdefault

<meta name="apple-mobile-web-app-status-bar-style" content="default">

default-6s.jpg

iPhone 6sでblack

<meta name="apple-mobile-web-app-status-bar-style" content="black">

black-6s.jpg

iPhone 6sでblack-translucent

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

black-translucent-6s.jpg

:sweat:今気づいたのですが、充電状態でスクリーンショット撮ってしまいました。緑が目立ちます……。

さて、iPhone Xの場合は……

iPhone Xでdefault

<meta name="apple-mobile-web-app-status-bar-style" content="default">

default-x.jpg

iPhone Xでblack

<meta name="apple-mobile-web-app-status-bar-style" content="black">

black-x.jpg

おや、ステータスバー内の時計やアイコンが白になっていないですね。
これが正なのか、それとも今後のアップデートで直るのかしら。

iPhone Xでblack-translucent

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

black-translucent-x.jpg

まあ想像通りだと思います。

sticky headerとblack-translucent

ただし、スティッキーヘッダー等の場合は注意が必要です。
ただでさえ画面スクロールすると
sticky-6s.jpg

うーん、微妙……
なのに、あのノッチときたら
sticky-x.jpg

これは〜〜〜〜〜〜〜〜〜:expressionless:ないかな〜〜〜〜〜〜〜〜〜ってなりますね。
※個人の感想です。

もしヘッダー固定でapple-mobile-web-app-capableyesにする案件があって、凹をどうするか、どうにかできるのかそれともできないのか考えるくらいなら、default(かblack)で設定しちゃいたいです。


さいごに

デザイナーの私が書くのも何ですが、
現在デジタルクエストではエンジニア・プログラマを募集しております(通年採用)!

ゆるく楽しい仲間とシビれる開発しませんか?

よろしくお願いします。