在 Safari 和 Chrome 中更改 iOS 7 状态栏的颜色

Posted 2023-03-06

技术标签:

【中文标题】在 Safari 和 Chrome 中更改 iOS 7 状态栏的颜色【英文标题】：Change the color of the iOS 7 status bar in Safari and Chrome 【发布时间】：2013-10-04 23:16:59 【问题描述】：

我想更改 Safari 和 Chrome 中 ios 7 状态栏的颜色。我正在开发一个移动网络应用程序，希望它具有原生的感觉，而现在，我只是得到一个白色的状态栏。

【问题讨论】：

【参考方案1】：

更新 3

minimal-ui 在 iOS 8 中被删除 :( 更多信息： iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions?

更新 2

现在 iOS 7.1 中出现了一个不同的错误。无论content 设置为什么，无论页面的background-color 是什么，当用户将Web 应用程序添加到主屏幕时，状态栏始终是半透明的。见演示here。

请注意，iOS 7.1 引入了一个名为 minimal-ui 的新标签，它有助于在 Mobile Safari 中隐藏浏览器 chrome，但添加到主屏幕时不会执行任何操作。更多详情here.

更新

在 7.0.4 中仍然是一个错误。

iOS 7.0.3 似乎存在一个错误。

未定义 <meta name="apple-mobile-web-app-status-bar-style"> 或将其定义为 content="default" = 黑色背景和黑色文本。

content="black" = 黑底白字。

content="black-translucent" = 如果画布背景不是纯白色 (FFF)，则为黑色背景和白色文本。或者如果背景是白色的，则带有黑色文本的半透明背景。

任何其他content 值（例如white）都不起作用，并且会显示default 行为。

经此参考确认： http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

【讨论】：

赞成突出“黑色半透明”的行为。有点令人沮丧，因为浅灰色的标题背景颜色现在很常见。当它实际上是浅灰色但运气不佳时，试图欺骗它认为背景是白色的。【参考方案2】：

我正在使用这个，而 ios 有其他答案中提到的错误。

首先我用这个设置状态栏：

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

对我来说，这会将文本设置为白色和背景透明。它也漂浮在我的内容上。

然后我有以下css：

body
    background:#dddddd;

body:before
    display: block;
    content: " ";
    height:20px;
    top: 0;
    background:rgba(0,0,0,0.8);
    position:-webkit-sticky;
    position:sticky;

通过这种方法，我的状态栏上的背景是深色的，并且具有一定的透明度。

我没有在 ios6 上测试过这个，一旦 Apple 修复了这个 bug，它可能会崩溃。滚动到顶部时看起来有点不对劲，并且反弹效果从状态栏下方移动背景。

不过，它现在很容易修复，主要是 CSS。

【讨论】：

你可以玩不同的颜色，我只是发布了我目前正在使用的那些。尝试根据自己的喜好更改正文背景颜色，也尝试更改状态栏的 rgba 颜色。【参考方案3】：

您可以通过更改主体的背景颜色来影响 safari 顶部栏的色调

身体背景颜色：蓝色； /* 用于色调 */ 背景图像：线性渐变（到底部，绿色 0%，绿色 100%）； /* 为身体 */

通过http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

【讨论】：

抱歉，这是不正确的。由于 safari 的透明性，这仅有效，而正确的方法是使用元标记。【参考方案4】：

我一直在寻找一种方法来做同样的事情。到目前为止，我看到的唯一选项涉及在您的 html 文档中使用这三个元标记之一。

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