Menu
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.
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>
308
All replies. It's possible your display has been switched to Dark Mode. Try going into System Preferences>General and click on "Light Appearance" to see if that works.
A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen.
Select the View and in the Attributes Inspector change the Background Color to Light Gray. Build and Run the Project. The default style of the status bar is dark content. The style of the status bar can be changed to a status bar with white content.
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.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
