15

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>
Griffen
  • 397
  • 1
  • 3
  • 22

4 Answers4

17

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.

LGP
  • 4,135
  • 1
  • 22
  • 34
  • @水口玄造 did you try my solution? – LGP Mar 01 '18 at 06:23
  • Yes, I have just tried it and it worked! However, the issue I have now is that the status bar text (time, signal, etc) is white when my background is also white. But you have removed the black bar so thank you very much! – Griffen Mar 01 '18 at 22:40
  • 1
    @水口玄造 Great! Well, in that case I think there is only one option. You can have black status bar text on white background, but then the status bar background will be white **solid**. Use this instead ``. – LGP Mar 02 '18 at 05:57
  • 2
    Also note, iOS caches a lot it seems. To successfully test changes of various parameters you may need to create new files to be sure it has reloaded the new content. This has hit me numerous times! – LGP Mar 02 '18 at 05:59
  • I couldn't find it documented but makes the notch-surrounding area white with black text. – darrinm Sep 26 '18 at 03:55
  • Very good answer, apple Supported Meta Tags page should include this. https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html – Christlin Panneer Apr 15 '19 at 17:54
3

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

<meta name="theme-color" content="#FFF" />
Justin Joseph
  • 3,001
  • 1
  • 12
  • 16
1

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

Ricain
  • 638
  • 1
  • 4
  • 17
-3

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

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

davidblumer
  • 103
  • 1
  • 3
  • If it is not possible, how is the result here achieved? Notice the blue header extending to status bar area .https://ayogo.com/blog/ios11-viewport/ – Griffen Feb 21 '18 at 23:01