iPhone X status bar black web app

前端未结

关注

 2  1279

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 an

相关标签:

2条回答

轻奢々

2021-02-03 11:47
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
一整个雨季

2021-02-03 11:48

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

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

0 讨论(0)
发布评论:

提交评论
- 加载中...