在iOS 7中,许多应用程序正在改变状态栏的外观,网页应用程序的状态栏显然也发生了一些变化。看起来网页应用程序开发人员将能够影响该栏的颜色,但这并不容易实现。
那么我们如何在网页应用程序中仍然更改状态栏的颜色呢?
那么我们如何在网页应用程序中仍然更改状态栏的颜色呢?
感谢您的开始,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并添加到主屏幕以查看它的实际效果。
你可以使用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;
}
如果你正在为这个问题苦苦挣扎,考虑到网上的一些说法,我决定创建一些可能会帮助你的东西。我将逐步解释它。
我通过元标签将状态栏设置为黑色半透明。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
然后我在页面顶部创建了一个空的div。
<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"> 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给这个导航栏设置了海军蓝的颜色,你可能想要修改。它将导航栏定位在页面的顶部,并使其成为粘性元素。它不是固定的,因为这样会重叠到下面的内容。然而,由于某种原因,粘性效果在页面中途停止起作用,我仍在尝试调试。
这个解决方案并不完美,但至少你可以完全控制它,与其他解决方案形成对比。改进总是受欢迎的。