苹果移动 Web 应用程序状态栏样式在 iOS 10 中的设置

Question

我知道之前有人问过这个问题，只是想知道在iOS 10（和iOS 9）中是否仍然如此...

根据苹果开发者网站关于Web应用程序的指南（点击这里），Web应用程序中有三种状态栏可供选择：默认（default）、黑色（black）和半透明黑色（black-translucent）。

1. 默认会显示白色状态栏和黑色文字;
2. 黑色会显示黑色状态栏和白色文字;
3. 半透明黑色会显示透明背景和白色文字。此外，该状态栏浮在内容上方，意味着您需要将内容向下推动20像素才能避免内容与状态栏文本重叠。

我非常想使用半透明黑色的状态栏（因为我认为它看起来更本地化），但我页面的背景是浅灰色的。这使得状态栏上的白色文字非常难以阅读。

简单地说，我只想要一个带有黑色文字的透明背景（基本上是默认半透明）。这可能吗？

- Brad

Answer 1

很不幸，您不能在透明背景上使用黑色文本。

我认为这个功能将在某个时间点被添加到架构中，并且也觉得现在无法实现很麻烦。简而言之，答案是设计您的虚拟应用程序以本地方式实现更大的控制其行为和外观。

苹果文档 支持的元标记

---

content="default"

---

content="black"

---

content="black-translucent"

- Matt

---

感谢 @Matt 的回答，看起来这是苹果犯下的一个明显的疏忽，但我想我只能等待了！ - Brad

不客气 @Brad :-) 我完全同意，我正在开发一个作为网页应用程序运行良好的管理/仪表板，并希望有更多的控制/选项可用！ - Matt

我已经添加了这两个元标记，但由于我的应用程序的黑色导航栏，状态栏黑色文本被隐藏了。<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 我该怎么做才能让状态栏文本变成白色？ - Mrunal

我无法在iOS 10上更改状态栏颜色。除了此链接中描述的元标记之外，还需要使用其他元标记吗？ - Gaurav

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html - Gaurav

Answer 2

我找到了解决方案！我们可以使用主题颜色meta标签来实现。

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

- theMukhiddin

---

哇，这个确实在2022年有效。 - Stdugnd4ikbd

你能展示一下你的完整代码或测试页面吗？我想要在浅色模式下使用黑色文字来实现透明状态栏，并在深色模式下使用白色文字来实现透明状态栏，但是我仍然在浅色模式下看到了白色文字。 - Lennart Schoors

2022年这应该是被接受的答案。 - pk1557

@LennartSchoors - 删除另一个元标记“apple-mobile-web-app-status-bar-style”。似乎它会覆盖“theme-color”。 - Nordling Art

还要注意，您必须在Safari配置中将面板设置为“紧凑模式”。否则，“theme-color”根本不适用于桌面或移动设备。 - dakur

Answer 3

目前还无法实现。我想补充一下（在阅读评论后），为了使更改显示出来，至少在我的iPhone X上，您需要从手机中删除该应用，然后重新将其添加到主屏幕。

- AlexChaseJones

---

真是该死 - 我花了两天时间重新安装它 - 只是为了让半透明样式出现 - 没有动态更新/在页面加载时设置样式。 - BananaAcid

哦，我的天啊，这对每个人来说都应该是棘手的。 - Даниил Пронин