Question

我们可以在iOS中为PWA应用程序动态更改状态栏（顶部的颜色）吗？我使用的是Angular，并且我一直在尝试在运行时修改 apple-mobile-web-app-status-bar-style 元标记，但好像没有工作。

this.meta.removeTag("name='apple-mobile-web-app-status-bar-style'");

if (isDarkMode) {
  this.bodyElement.style.setProperty('--mainPageBackground', '#000');
  this.bodyElement.style.setProperty('--mainTextColor', '#FFF');
  this.meta.updateTag({ name: 'apple-mobile-web-app-status-bar-style', content: `black-translucent` }, `name='apple-mobile-web-app-status-bar-style'`);
}
else {
  this.bodyElement.style.setProperty('--mainPageBackground', '#FFF');
  this.bodyElement.style.setProperty('--mainTextColor', '#000');
  this.meta.updateTag({ name: 'apple-mobile-web-app-status-bar-style', content: `default` }, `name='apple-mobile-web-app-status-bar-style'`);
}

Answer 1

使用<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">并将所需的颜色应用于正文和白色，或将任何背景颜色应用于页面包装器。希望对您有所帮助！

Answer 2

您可以在Android / Chrome上尝试this solution，但在以下适用于iOS：

var appleThemeColor = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
if(isDarkMode) appleThemeColor.setAttribute("content", "#000");
else appleThemeColor.setAttribute("content", "#FFF");

干杯！

在PWA应用程序的iOS中动态更改状态栏颜色

2 个答案: