如何在iOS 7网页应用中设置状态栏颜色？

Question

在iOS 7中，许多应用程序正在改变状态栏的外观，网页应用程序的状态栏显然也发生了一些变化。看起来网页应用程序开发人员将能够影响该栏的颜色，但这并不容易实现。

那么我们如何在网页应用程序中仍然更改状态栏的颜色呢？

- Stijn

Answer 1

感谢您的开始，stjin，我已经成功接手并使其运行。

您遇到了-webkit-stickey位置的问题。那不是一个很好的解决方案。

经过尝试和测试，position:fixed对我有效。我还添加了一些内容，使其与Bootstrap 3.0兼容。请参见下面：

首先

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

然后

<div id="statusbar"> </div>

最后

        <?php 
$ua = $_SERVER['HTTP_USER_AGENT'];
$iphone = strpos($ua,"iPhone");
$safari = strpos($ua,"Safari"); 
if ($iphone == true && $safari == false){
    echo '<style type="text/css"> #statusbar{ background: red; width:100%; position: fixed; top:0; opacity: 0.95; z-index: 1030;} .navbar {margin-top: 15pt;}</style>';
}
else{
    echo '<style type="text/css"> #statusbar{ display:none;} </style>';
}
?>

你的else类被设置为#sidebar而不是#statusbar，我已经为您更改了。

如果您不想要与Bootstrap兼容，则删除.navbar和相关样式，z-index也不是必需的。我还添加了一些不透明度，以使其具有更多的iOS7风格。

再次感谢@stjin - 你帮助我得到了我想要的东西。请转到www.montessoricommons.cc并添加到主屏幕以查看它的实际效果。

- fearghal

---

感谢您的改进和纠正。您的网站看起来很棒！不透明度是一个很好的补充。不使用固定布局更多是因为我的网站其余部分的构建方式。在您的网站上似乎运行顺畅。 - Stijn

我似乎无法让它正常工作。即使我将元标记设置为黑色半透明，状态栏仍不是半透明的。如果我没有使用导航栏的话，我想我应该给状态栏div一个高度？ - CJT3

哦，我忘记重新将我的应用添加到主屏幕了...由于某种原因，在添加到主屏幕后状态栏样式是永久的。:( - CJT3

Answer 2

你可以使用Jquery / javascript轻松完成它

if (window.navigator.standalone) {
    document.write("<style>#maindiv{padding-top:20px;background-color: #D83F3F}</style>");
    //or
    $("#maindiv").addClass("standalone");
}

还有一些CSS

.standalone{
    padding-top: 20px;
    background-color: #D83F3F;
}

- Gino

Answer 3

如果你正在为这个问题苦苦挣扎，考虑到网上的一些说法，我决定创建一些可能会帮助你的东西。我将逐步解释它。

我通过元标签将状态栏设置为黑色半透明。

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

然后我在页面顶部创建了一个空的div。

<div id="statusbar"> </div>

之后，我在头部添加了以下PHP代码。它检查用户代理以确定设备是否为iPhone。然后检查Safari的缺失。如果两者都是这样，我们就找到了一个Web应用程序，并指定我们创建的div的CSS。否则，我们隐藏该div。

<?php 
$ua = $_SERVER['HTTP_USER_AGENT'];
$iphone = strpos($ua,"iPhone");
$safari = strpos($ua,"Safari"); 
if ($iphone == true && $safari == false){
    echo '<style type="text/css"> div#statusbar{ background: navy; height: 15pt; width:100%; position:-webkit-sticky; top:0;} </style>';
}
else{
    echo '<style type="text/css"> div#statusbar{ display:none;} </style>';
}
?>

CSS给这个导航栏设置了海军蓝的颜色，你可能想要修改。它将导航栏定位在页面的顶部，并使其成为粘性元素。它不是固定的，因为这样会重叠到下面的内容。然而，由于某种原因，粘性效果在页面中途停止起作用，我仍在尝试调试。

这个解决方案并不完美，但至少你可以完全控制它，与其他解决方案形成对比。改进总是受欢迎的。

- Stijn