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

Question

在 iOS 7 中，许多应用程序都在改变状态栏的外观，显然 Web 应用程序的状态栏也发生了一些变化。看起来网络应用程序开发人员可以影响栏的颜色，但这并不容易。

我们如何才能在我们的网络应用程序中更改此状态栏颜色？

Answer 1

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

Answer 2

为解决这个问题而苦苦挣扎，并考虑到网络上的说法，我决定创建一些可能对您有所帮助的东西。我会一步一步解释。

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

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

然后我在 body 的最顶部创建了一个空的 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 为栏提供了您可能想要更改的海军蓝色。它将栏定位为页面顶部的粘性元素。它不是固定的，因为它会与下面的内容重叠。但是，由于某种原因，sticky 在页面中途停止工作，我仍在尝试调试。

此解决方案并不完美，但与其他解决方案相比，它至少是您可以完全控制的。总是欢迎改进。

Answer 3

感谢您的开始 stjin，我设法接受并使其工作。

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

久经考验的固定位置对我有用。我还添加了一些东西以使其与 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。我帮你改了。

如果您不希望引导兼容性，则删除 .navbar 和相关样式，z-index 也不是必需的。我还添加了一点不透明度，让它更有 iOS7 的味道。

再次感谢@stjin - 你帮助我得到了我想要的东西。前往 www.montessoricommons.cc 并添加到主屏幕以查看它的运行情况。