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

## はじめに
[デジタルクエスト](https://www.digiq.co.jp/)[Advent Calendar](https://qiita.com/advent-calendar/2017/digiq-tech) 21日目は、デザイナーumiが担当いたします。

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

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

```html
<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-style`で`content`に指定できるものは`default` `black` `black-translucent`で、それぞれステータスバー部分の背景色が変わります。

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


#### iPhone 6sでdefault
```html
<meta name="apple-mobile-web-app-status-bar-style" content="default">
```
![default-6s.jpg](https://qiita-image-store.s3.amazonaws.com/0/214683/87bd38e8-7972-2221-33c3-ae40715ad512.jpeg)


#### iPhone 6sでblack
```html
<meta name="apple-mobile-web-app-status-bar-style" content="black">
```
![black-6s.jpg](https://qiita-image-store.s3.amazonaws.com/0/214683/9fdbd290-2c0b-2569-74d1-3c6aafe4df9c.jpeg)


#### iPhone 6sでblack-translucent
```html
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
```
![black-translucent-6s.jpg](https://qiita-image-store.s3.amazonaws.com/0/214683/4eea8bb4-b93d-8111-2e9e-04a970e74fa0.jpeg)

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

### さて、iPhone Xの場合は……
#### iPhone Xでdefault
```html
<meta name="apple-mobile-web-app-status-bar-style" content="default">
```
![default-x.jpg](https://qiita-image-store.s3.amazonaws.com/0/214683/d7c0db49-2516-6797-6865-3a446b30f086.jpeg)


#### iPhone Xでblack
```html
<meta name="apple-mobile-web-app-status-bar-style" content="black">
```
![black-x.jpg](https://qiita-image-store.s3.amazonaws.com/0/214683/438e381f-5c9a-c35f-bb9e-06c1103561c6.jpeg)

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

#### iPhone Xでblack-translucent
```html
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
```
![black-translucent-x.jpg](https://qiita-image-store.s3.amazonaws.com/0/214683/00b5b29a-c842-960a-5a85-5194e141f375.jpeg)


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


## sticky headerとblack-translucent

ただし、**スティッキーヘッダー**等の場合は注意が必要です。 
ただでさえ画面スクロールすると
![sticky-6s.jpg](https://qiita-image-store.s3.amazonaws.com/0/214683/8a4bc6b9-8258-23dd-8b3e-701fecd03a91.jpeg)

うーん、微妙…… 
なのに、あのノッチときたら
![sticky-x.jpg](https://qiita-image-store.s3.amazonaws.com/0/214683/81372123-0b67-b334-58f9-5cf652cd637b.jpeg)

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

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

***

## さいごに

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

[ゆるく楽しい仲間とシビれる開発しませんか？](https://www.passion-navi.com/company/index/3308)

よろしくお願いします。