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

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

More than 1 year has passed since last update.

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.

https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Safari_11_0/Safari_11_0.html

ということで、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も数年前から更新されていないので、毎回手探りで挙動を確認しなくてはならないのがとてもつらい。

moroya
アキバではたらくWebエンジニア。最近はディレクターはじめました。
https://moroya.net
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
ユーザーは見つかりませんでした