46
32

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iOS 11でWeb Appが強化されたけど、またしてもメタタグがおかしい

Last updated at Posted at 2017-09-20

Safari 11 でWeb Appが強化された

  • Updated WebKit support for home screen apps.
    • Web applications saved to the home screen now support all features of modern WebKit, such as Fast-Tap, scroll snapping and the new visual viewports behavior.

ということで、Safariでは使えていたがホーム画面に追加すると動作しなくなっていた項目が動くようになり、Web Appの使い勝手が若干よくなった。
特に300msのクリック遅延問題が解決されたのは嬉しい。

しかし、またしても他の問題が出てしまっている。

ステータスバーの制御

メタタグに以下を追加することによって、ホーム画面から起動したときにURLバーなどを非表示にして、ネイティブアプリのように見せかけることができる。

<meta name="apple-mobile-web-app-capable" content="yes">

さらに以下を追加することで、見た目を変えられる。

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

screenshot.png

このcontent=black-translucentの時は、上画像のように top: 0px; が画面端にきていたが、iOS 11ではステータスバーの高さが加わった状態になる。
そのため、ステータスバーの文字色が白かつ、背景色も白なので真っ白の余白が出来てしまう。

この余白、最近どっかで見た… と思い、以下のタグを追加すると想定通りの動きになった。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

おそらく、iPhone Xの登場でSafariのレンダリング領域の概念が改められたのだと考えられる。
そのためviewport-fit=coverを追加することで、レンダリング領域を最大限まで広げられる。

iPhone XのSafariで表示される謎の空白を消す方法 - Qiita

しかし、これを追加すると今度はbottomにステータスバー分の高さの謎の余白が出る。

CSSでposition: fixed; bottom: 0;にしても、謎の余白がなくならないのでviewportの高さ計算にバグがあるような気がする。
現状これを修正する方法は見つけられていないので、content="black"かcontent="default"を使うのが良さそう。

安定しないiOSのWeb App機能

iOS 9のMobile Safariで消えた2つの機能

この記事にもあるように、Web Appの制御メタタグはiOSのメジャーバージョンアップのたびに不具合で挙動が変わっており、全く安定していない。

Supported Meta Tags

Safari HTML Referenceも数年前から更新されていないので、毎回手探りで挙動を確認しなくてはならないのがとてもつらい。

46
32
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
46
32

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?