如何在iOS 7 Web应用程序中设置状态栏颜色？ [英] How to set the status bar color in an iOS 7 web app?

问题描述

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

In iOS 7, many apps are changing the appearance of the status bar and clearly something has changed to the status bar of web apps as well. It looked like web app developers would be able to influence the color of the bar, but this didn't turn out to be easy.

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

How can we still change this status bar color in our web apps?

推荐答案

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

Thanks for your start stjin, I managed to take it and make it work.

您遇到问题：-webkit-stickey。这不是一个很好的解决方案。

You're having problems with position: -webkit-stickey. Thats not a great solution.

经过试验和测试的位置为我工作。我还添加了一些东西来使它与Bootstrap 3.0兼容。见下文：

Tried and tested position fixed worked for me. I also added a few things to make it Bootstrap 3.0 compatible. See below:

第一次

<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。我为你改变了。

You also had the else class set to #sidebar not #statusbar. I changed that for you.

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

If you don't want bootstrap compatibility then remove .navbar and associated styles, z-index is not necessary either. I also added a little bit of opacity to give it a little more iOS7 flavour.

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

Again, thanks @stjin - you helped me get what I wanted. Head over to www.montessoricommons.cc and add to home screen to see it in action.

这篇关于如何在iOS 7 Web应用程序中设置状态栏颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！