ios 10 中的 apple-mobile-web-app-status-bar-style

Question

我知道这个问题之前已经被问过，只是想知道 ios 10（和 ios 9）中是否仍然存在这种情况...

根据苹果 Web 应用程序开发人员指南（在此处找到），Web 应用程序中的状态栏有 3 种选择； 默认、黑色和黑色半透明。

1. 默认会导致带有黑色文本的白色状态栏，
2. Black 会导致带有白色文本的黑色状态栏，并且
3. 黑色半透明会产生带有白色的透明背景 文本。此外，此状态栏浮动在您的内容上方， 这意味着你必须将内容向下推 20px 才能不 内容与状态栏文本重叠。

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

简单地说，我只是想要一个带有黑色文本的透明背景（本质上是default-translucent）。这可能吗？

Answer 1

不幸的是，不可以在透明背景上显示黑色文本。

我认为这将在某个时候添加到架构中，并且我还发现您现在无法实现这个示例是一件痛苦的事情。我想简而言之，答案是本地设计您的人造应用程序，以更好地控制其行为和外观。

Apple 文档 支持的元标签

---

content="default"

---

content="black"

---

content="black-translucent"

Answer 2

我找到了解决方案！我们可以通过主题颜色元标记来实现这一点。

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

Answer 3

目前还不可能。我只是想补充一点（在阅读评论后），为了至少在我的 iphone X 上显示更改，您需要从手机中删除该应用程序，然后将其重新添加到主屏幕。

Answer 4

我找到了答案！ （HTML）

It follows the corresponding color code from the color spectrum.
The background should change to white with this:

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

And the status bar elements (time, Battery...) should show black with this:

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

You're welcome people!