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

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

More than 1 year has passed since last update.

はじめに

デジタルクエスト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)で設定しちゃいたいです。


さいごに

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

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

よろしくお願いします。

matri
COMPとBASE PASTAで何とか生き延びている系OL(インハウスデザイナー)
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
ユーザーは見つかりませんでした