'iPhone X status bar black web app

I am working on a web-app and in testing on iPhone X using the Simulator, the status bar is completely black. How do I make my website cover the entire screen? I am not using any library; I have seen many questions mentioning something called Cordova but what I have is just HTML with CSS.

Screenshot of iPhone X simulator

Here is my HTML code in the head.

<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


Solution 1:[1]

It is possible, but requires a few lines more. Here is how to do it. Strictly speaking I don't think you need width=device-width and initial-scale=1.0, I added it since you use it. The launch.png is your launch image that will show if your page takes time to load, and it should be a 1125 x 2436 PNG image and also be placed on your server, of course. It is required to make it work. As is the black-translucent status bar style and the viewport-fit=cover.

Also note that if you already have created a shortcut to your page you must remove it and create it again after you have updated your page with this content.

<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>

The above will stretch your viewport all the way to the top for iPhone X (and other models), setting the top bar content (clock, battery status, signal strength etc) to white on transparent. If you have a white or very light colored background this probably doesn't look very good. Unfortunately there is no way to have have dark content on your own background. However, there are a couple of options that might be good enough.

Setting the apple-mobile-web-app-status-bar-style to default gives you a black top bar content on a solid white background plate. This will look fine if you can accept your content to have a white top bar background and scroll under it.

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

Another option is to set apple-mobile-web-app-status-bar-style to black. This is more of a convenience, which creates a solid black background with white top bar content, effectively resulting in a reverse of using default. 

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

Here are samples of how the different content parameters will look. Not iPhone X but the color schemes are same.

Read here if you need to account for the different top bar heights on different iOS devices.

Solution 2:[2]

Since iOS 14 and introduction of dark mode on iPhones, Apple has made some changes. If you are looking for white or black bar around the notch (depending on light/dark mode) you can add the following metas:

<meta name="apple-mobile-web-app-status-bar-style" media="(prefers-color-scheme: light)" content="light-content" />
<meta name="apple-mobile-web-app-status-bar-style" media="(prefers-color-scheme: dark)" content="dark-content" />

Color of the bar will adapt automatically on dark mode activation or deactivation.

More options and explanations available here: https://firt.dev/ios-14.5/#status-bar-change

Solution 3:[3]

I face same issue and solved by adding below code to Public --> index.html

<meta name="theme-color" content="#FFF" />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Ricain
Solution 3 Justin Joseph

Related Questions