iPhone X状态栏黑色网络应用程序
我正在使用网络应用程序并使用模拟器在iPhone X上进行测试,状态栏完全是黑色的.如何让我的网站覆盖整个屏幕？我没有使用任何图书馆; 我看过许多提到Cordova的问题,但我所拥有的只是带CSS的HTML.
这是我头脑中的HTML代码.
<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>
这是可能的,但需要更多的几行.这是怎么做的.严格来说,我不认为你需要width=device-width和initial-scale=1.0我加它,因为你使用它.这launch.png是您的启动图像,它将显示您的页面是否需要时间加载,它应该是1125 x 2436PNG图像,当然也可以放在您的服务器上.它需要使它工作.由于是black-translucent状态栏风格和viewport-fit=cover.
另请注意,如果您已经创建了页面的快捷方式,则必须在使用此内容更新页面后将其删除并再次创建.
<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>
上面的代码将舒展你的视口一路顶端为iPhone X(和其他型号),设定最上面一栏的内容(时钟,电池状态,信号强度等),以白色透明.如果你有一个白色或非常浅的背景,这可能看起来不太好.不幸的是,没有办法在你自己的背景上有暗的内容.但是,有几个选项可能足够好.
设置apple-mobile-web-app-status-bar-style来default为您提供了一个坚实的白色背景板黑色的顶栏的内容.如果您可以接受您的内容以获得白色顶部条形背景并在其下滚动,则此效果会很好.
<meta name="apple-mobile-web-app-status-bar-style" content="default">
另一种选择是设置apple-mobile-web-app-status-bar-style为black.这更方便了,它创造了一个带有白色顶部条形内容的纯黑色背景,有效地导致了使用的逆转default.
<meta name="apple-mobile-web-app-status-bar-style" content="black">
以下是不同内容参数的外观示例.不是iPhone X,但颜色方案是相同的.
- 另请注意，iOS 似乎缓存了很多。要成功测试各种参数的更改，您可能需要创建新文件以确保它已重新加载新内容。这件事让我受过无数次打击！ (2认同)
| 归档时间： |
|
| 查看次数： |
5013 次 |
| 最近记录： |