Как установить цвет строки состояния в веб-приложении iOS 7?

Question

В iOS 7 многие приложения меняют внешний вид строки состояния, и, очевидно, что-то изменилось и в строке состояния веб-приложений. Похоже, разработчики веб-приложений могли бы влиять на цвет панели, но это оказалось нелегко.

Как мы можем изменить этот цвет строки состояния в наших веб-приложениях?

Answer 1

Борясь с этой проблемой и учитывая, что говорится в Интернете, я решил создать что-то, что может вам помочь. Я объясню это шаг за шагом.

Я установил строку состояния в черный полупрозрачный через метатег.

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

Затем я создал пустой div на самой верхней части тела.

<div id="statusbar"> </div> 

Впоследствии я добавил следующий фрагмент PHP в головной блок. Он проверяет пользовательский агент, чтобы узнать, является ли устройство iPhone. Затем он проверяет отсутствие Safari. Если это так, мы нашли веб-приложение, и мы укажем css для созданного div. Иначе мы спрячем 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

Спасибо за ваше начало, мне удалось взять его и заставить работать.

У вас возникли проблемы с положением: -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 class установлен в #sidebar, а не #statusbar. Я изменил это для вас.

Если вам не нужна совместимость с bootstrap, удалите .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; 
}