没有 PWA 的 iOS Safari 状态栏主题颜色

Question

我一直在尝试设置网站中状态栏的背景颜色。通过这样做，在 Android 上可以正常工作：

<meta name="theme-color" content="#00623A" />

我认为以下内容适用于 iPhone，因为页面的背景颜色是相同的：

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

不幸的是，它仍然显示带有黑色图标的浅色版本的背景颜色。

对此，我只能看到当 PWA 实际上添加到主屏幕并以全屏模式运行时，才会提到此功能。这是正确的吗？如果是这样，有没有办法在正常网站运行时更改状态栏背景颜色？

Answer 1

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

“黑色半透明”的作用是什么，我引用一下：

黑色半透明设置具有白色文本和符号。它将采用与网络应用程序的正文标记相同的背景颜色。

所以，你必须这样做：

body {
  background-color: #00623A;
}

我在普通的浏览器网络应用程序上测试了它，它可以工作......但并不完全像你所期望的那样。我的主题颜色是靛蓝，条形图显示相同的颜色但更浅。但至少从纯白色变成了蓝色。