如何在iOS 7 Web應用程序中設置狀態欄顏色？

Question

在iOS 7中，許多應用程序正在改變狀態欄的外觀，並且很明顯，網絡應用程序的狀態欄也發生了變化。它看起來像Web應用程序開發人員將能夠影響酒吧的顏色，但這並不容易。

我們怎樣才能在我們的web應用程序中更改此狀態欄的顏色？

Answer 1

爲了解決這個問題，考慮網絡上的問題，我決定創建一些可以幫助你的東西。我會一步一步解釋它。

我通過meta標籤將狀態欄設置爲黑色半透明。

<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給酒吧一個海軍藍色，你可能想改變。它將該條定位爲頁面頂部的粘性元素。它不是固定的，因爲它會覆蓋下面的內容。然而，由於某種原因，sticky在頁面中途停止工作，我仍然試圖調試。

這種解決方案並不完美，但至少可以完全控制的東西，與其他解決方案相比。總是歡迎改進。

Answer 2

謝謝你的開始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>'; 
} 
?> 

也有電子lse類設置爲#sidebar而不是#statusbar。我改變了你的。

如果你不想引導程序的兼容性，然後刪除.navbar和相關風格，z-index也不是必需的。我還添加了一點不透明度，讓它更多一點iOS7的味道。

再次感謝@stjin - 你幫我得到了我想要的。轉到www.montessoricommons.cc並添加到主屏幕以查看它的行動。

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