更改顶部状态栏颜色

更新时间:2022-05-21 20:46

如果您的 Web 应用程序像原生应用程序一样以独立模式显示,您可以最小化显示在 iOS 屏幕顶部的状态栏。使用状态栏样式的元标记执行此操作。


除非您首先按照隐藏 Safari 用户界面组件中的说明指定独立模式,否则此元标记无效。然后使用状态栏样式元标记 ,apple-mobile-web-app-status-bar-style来根据您的应用程序需要更改状态栏的外观。例如,如果要使用整个屏幕,请将状态栏样式设置为半透明黑色。


例如,以下 HTML 将状态栏的背景颜色设置为黑色:

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

设置状态栏为白色

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

设置为透明黑色

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

设置自定义颜色(注意该方法仅IOS15以上才生效)

<meta name="theme-color" content="#FFFFFF">