更改Progressive Web App应用程序的iOS状态栏


即使在使您的PWA Web应用程序具有能力(独立)之后,您可能会注意到它的全屏版本仍然不完全类似于原生iOS应用程序。仍然存在的最明显差异之一通常是屏幕顶部的状态栏(通常显示时间和电池状态)显示为全黑且不显示任何文本或符号。看看Instagram的PWA,例如:


为了更改渐进式Web应用程序的iOS状态栏,您必须使用apple-mobile-web-app-status-bar-style元标记。不幸的是,办法自定义状态栏的数量相当有限,但苹果提供了三种不同的设置:defaultblack,和black-translucent
default

该default设置具有带有黑色文本和符号的白色背景。

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

black

该black设置具有黑色背景和黑色文本和符号,使其显示为全黑。如果您不使用状态栏元标记,这就是状态栏的样子。

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

black-translucent

该black-translucent设置具有白色文本和符号,并将采用与 Web 应用程序主体相同的背景颜色。不幸的是,即使您使用浅色背景,文本颜色也会保持白色。

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

给TA买糖
共{{data.count}}人
人已赞赏
技术文档

给Progressive Web App应用程序添加自定义iOS启动画面

2021-8-18 1:57:18

技术文档

Sojson V4加密如何解密?Sojson V4解密方法全过程分享

2021-8-19 23:58:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
有新私信 私信列表
搜索