如何在iOS 7的Web应用程序中设置状态栏的颜色？

在iOS 7中，很多应用程序正在改变状态栏的外观，而且显然有些事情已经改变为web应用程序的状态栏。 它看起来像networking应用程序开发人员将能够影响酒吧的颜色，但这并不容易。

我们怎样才能改变我们的networking应用程序中的状态栏颜色？

Answer 1

谢谢你的开始，我设法把它付诸实施。

你的位置有问题：-webkit-stickey。 这不是一个很好的解决scheme。

尝试和testing位置固定为我工作。 我还添加了一些使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>'; } ?> 

您还有其他类设置为#sidebar而不是#statusbar。 我改变了你的。

如果你不想引导兼容性，那么删除.navbar和相关的样式，z-index也是不必要的。 我还添加了一点点的不透明度，让它更多一点iOS7的味道。

再一次，谢谢@stjin – 你帮我得到了我想要的东西。 转到www.montessoricommons.cc并添加到主屏幕以查看它的行动。

Answer 2

为了解决这个问题，考虑networking上的问题，我决定创build一些可以帮助你的东西。 我会一步一步解释。

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

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

然后，我在身体的最上方创build了一个空的div。

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

之后，我将下面的一段PHP添加到头部。 它检查用户代理，以确定设备是否是iPhone。 然后检查是否存在 Safari。 如果两者都是这样，我们已经find了一个Web应用程序，我们指定了我们创build的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给酒吧一个海军蓝色，你可能想改变。 它将该栏定位为页面顶部的粘性元素。 它不是固定的，因为它会覆盖下面的内容。 但是，由于某种原因，sticky在页面中途停止工作，我仍然试图debugging。

这个解决scheme并不完美，但至less可以完全控制，与其他解决scheme相比。 总是欢迎改进。

Answer 3

你可以用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; }