web-dev-qa-db-ja.com

iPhone XステータスバーブラックWebアプリ

私はWebアプリに取り組んでおり、シミュレータを使用してiPhone Xでテストしていると、ステータスバーが完全に黒くなります。ウェブサイトを画面全体に表示するにはどうすればよいですか？ライブラリは使用していません。 Cordovaと呼ばれるものに言及する多くの質問を見てきましたが、私が持っているのはCSSを使用したHTMLだけです。

Screenshot of iPhone X simulator

これが私の頭にあるHTMLコードです。

<head>
  <meta charset="utf-8">
  <meta name="Apple-mobile-web-app-capable" content="yes">
  <meta content="viewport-fit=cover, width=device-width, initial-scale=1.0" name="viewport">
  <title>My PWA</title>
  <link rel="stylesheet" href="/assets/styles/design.css">
</head>
htmliossafari
9
Griffen

可能ですが、さらに数行必要です。これを行う方法は次のとおりです。厳密に言えば、width=device-widthとinitial-scale=1.0は必要ないと思います。使用しているので追加しました。 launch.pngは、ページの読み込みに時間がかかる場合に表示される起動画像であり、1125 x 2436 PNG画像であり、サーバーにも配置する必要があります。機能させるためにはrequiredです。 black-translucentステータスバースタイルとviewport-fit=coverも同様です。

また、ページへのショートカットをすでに作成している場合は、ショートカットを削除し、このコンテンツでページを更新した後で再度作成する必要があります。

<html><head>
  <meta charset="utf-8">
  <link rel="Apple-touch-startup-image" href="./launch.png">
  <meta name="Apple-mobile-web-app-capable" content="yes">
  <meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name='viewport' content='viewport-fit=cover, width=device-width, initial-scale=1.0'>
  <title>Test</title>
</head>
<body>
    content
</body>
</html>

上記は、iPhone X（および他のモデル）のビューポートを一番上まで伸ばし、上部バーのコンテンツ（時計、バッテリーステータス、信号強度など）を透明で白に設定します。白または非常に明るい色の背景がある場合、これはおそらくあまりよく見えません。残念ながら、自分の背景に暗いコンテンツを含める方法はありません。ただし、十分に良いオプションがいくつかあります。

Apple-mobile-web-app-status-bar-styleをdefaultに設定すると、真っ白な背景のプレートに黒い上部バーのコンテンツが表示されます。コンテンツを受け入れて上部バーの背景を白にし、その下にスクロールできる場合は、これで問題ありません。

<meta name="Apple-mobile-web-app-status-bar-style" content="default">

別のオプションは、Apple-mobile-web-app-status-bar-styleをblackに設定することです。これはより便利で、白いトップバーの内容で黒一色の背景を作成し、defaultの使用と逆の効果をもたらします。

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

これは、さまざまなコンテンツパラメータの外観のサンプルです。iPhoneXではありませんが、配色は同じです。

異なるiOSデバイスで異なる上部バーの高さを考慮する必要がある場合は、こちらをご覧ください。

8
LGP