CODEWITHSUNDEEP
htmliossafari
Griffen
Griffen

Reputation: 417

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>

Upvotes: 15

Views: 12857

Answers (4)

Justin Joseph
Justin Joseph

Reputation: 3899

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

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

Upvotes: 3

Ricain
Ricain

Reputation: 706

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

Upvotes: 2

LGP
LGP

Reputation: 4333

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.

Upvotes: 17

davidblumer
davidblumer

Reputation: 103

You can't. iOS doesn't support fullscreen.

https://caniuse.com/#feat=fullscreen

Upvotes: -3

Related Questions