Question

在iOS 7中，许多应用程序正在改变状态栏的外观，显然某些内容已更改为Web应用程序的状态栏。看起来Web应用程序开发人员可以影响条形图的颜色，但这并不容易。

我们如何在网络应用中更改此状态栏颜色？

Answer 1

感谢您的开始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。我为你改变了。

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

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

Answer 2

在解决这个问题的同时考虑到网络上的内容，我决定创建可能会帮助你的东西。我会一步一步解释。

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

<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为条形图提供了您可能想要更改的海军蓝色。它将条形图定位为页面顶部的粘性元素。它没有固定，因为它会与下面的内容重叠。但是，由于某些原因，粘滞停止在页面中间工作，我还在尝试调试。

这个解决方案并不完美，但与其他解决方案相比，它至少可以完全控制。我们随时欢迎改进。

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;
}

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

3 个答案: