Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
41
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@matri

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)で設定しちゃいたいです。


さいごに

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

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

よろしくお願いします。

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
41
Help us understand the problem. What are the problem?