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

Posted 2023-02-23

【中文标题】没有 PWA 的 iOS Safari 状态栏主题颜色

【英文标题】：iOS Safari Status bar theme color without PWA

【发布时间】：2021-01-06 17:48:11

【问题描述】：

我一直在尝试设置网站状态栏的背景颜色。这样做可以在 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 实际添加到主屏幕并以全屏模式运行时才提到这个工作。这是正确的吗？如果是这样，有没有办法在作为普通网站运行时更改状态栏背景颜色？

【问题讨论】：

我不想问，但是你能发个截图吗？不同的 iPhone 可能表现不同。例如，较新的型号具有缺口。透明应该让您的网站显示在状态栏后面。它在我的 iPhone 上有缺口。

【参考方案1】：

根据这篇文章：https://codeburst.io/progressive-web-apps-customize-status-bar-23c4b2de590f你是在正确的轨道上。

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

`black-translucent" 的作用，我引用：

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

所以，你必须这样做：

body 
  background-color: #00623A;

我在一个普通的浏览器网络应用程序上对其进行了测试，它可以正常工作……但并不像您期望的那样。我的主题颜色是靛蓝，条形显示相同的颜色但更浅。但至少从纯白色变成了蓝色。