PWA - iOS更改状态栏颜色

Question

是否可以在iOS 11.3 Beta 6上的Progressive Web App中更改状态栏的颜色？ 试图更改manifest.json文件中的background_color和theme_color的HEX代码但我无法实现任何更改。

Answer 1

那么你可以使用

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

使状态栏透明（不可见）并在状态栏后面使用您喜欢的任何颜色的div。 框架7通过允许您更改颜色来实现此目的

<div class="statusbar" />

用于自定义ios状态栏。 在旁注中，您可能还需要在头部正确添加元视图端口标记。 例如

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

状态栏不需要此标记，但使用启动或加载屏幕。 介质上的用户做了一篇用于设置启动画面的文章。

<meta name="apple-mobile-web-app-capable" content="yes">

此外，由于apple对清单文件的支持有限并且过去已经更改了pwa支持，这些标记最终可能会被弃用，并且最终可能会正确使用manifest.json文件。