Niemożliwe jest ukrycie pasków nawigacji w Safari iOS 7 na iPhone'a / iPoda touch

Nie wierzę, że istnieje rozwiązanie umożliwiające programowe ukrywanie słupków za pomocą javascript / css / html, ale spróbuję opisać problem. Jesteśmy zespołem twórców gier mobilnych i od roku rozwijamy grę.

Po ogłoszeniu iOS 7 stanęliśmy przed problemem, że ukrycie pasków nawigacyjnych jest NIEMOŻLIWE. Po dotknięciu przez użytkownika górnej lub dolnej części przeglądarki Safari ponownie pojawiają się paski nawigacyjne i ukrywają wszystkie elementy sterujące w grze.

Jedynym rozwiązaniem, jakie do tej pory znaleźliśmy, jest zmuszenie użytkownika do:

1. Obróć urządzenie
2. Przewiń stronę
3. Dodaj aplikację do ekranu głównego

Żadna z tych alternatyw nie jest akceptowalna. Wygląda na to, że Apple zdaje sobie sprawę z tego problemu, ale nadal go ignoruje. Zamknęli zgłoszony błąd jako duplikat błędu # 14076889.

Uważam, że nie jesteśmy jedynym zespołem, który ma ten sam problem. Czy ktoś zna rozwiązanie?

Aktualizacja wrzesień 2014: iOS 8 usunął tę minimal-uifunkcję . Znów nie ma innego sposobu na usunięcie / ukrycie pasków nawigacji niż poleganie na domyślnym zachowaniu przeglądarki (paski będą ukryte podczas przewijania, ale tylko wtedy, gdy przewijany element to BODYstrona). Jedynym „obejściem” jest zapisanie aplikacji na ekranie głównym i ustawienie odpowiednich metatagów (patrz poniżej).

Aktualizacja sierpień 2014: iOS 8 (beta) nie obsługuje jużminimal-ui . Nie ma obejścia. (Przyczyną tego jest prawdopodobnie nadużycia ze strony witryn internetowych, które próbowały uniemożliwić ludziom ucieczkę, chociaż w iOS 8 Safari mogą pojawić się nowe funkcje, które nie zostały jeszcze upublicznione, ale zastępują je minimal-ui).

iOS 7.1 dodał nowe API, aby rozwiązać ten problem:

<meta name="viewport" content="minimal-ui">

Ta nowa flaga widoku domyślnego ukrywa interfejs użytkownika Safari (wyświetlany jest tylko mały pasek tytułu z adresem URL i wskaźnikiem SSL). Aby uzyskać dostęp do interfejsu użytkownika Safari, użytkownicy muszą aktywnie dotknąć tego paska tytułu.

Zwróć uwagę, że w systemie iOS 7.0.x nie ma interfejsu API ani znanego obejścia tego problemu . W tych wersjach, jeśli chcesz trwale ukryć przeglądarkę Safari, musisz <meta name="apple-mobile-web-app-capable" content="yes">poprosić użytkownika o dodanie aplikacji internetowej do ekranu głównego (z ustawionymi odpowiednimi metatagami ) lub użyć jakiegoś natywnego opakowania aplikacji, takiego jak Phonegap i rozpowszechniać za pośrednictwem w sklepie App Store.

Osobiście żałuję, że nie usunęli przycisku „pełnego ekranu”, który wprowadzili w trybie poziomym w iOS 6 Mobile Safari, co było świetnym rozwiązaniem, które uszczęśliwiło programistów i użytkowników.

Idealnym kandydatem do bardziej trwałego rozwiązania tego problemu byłoby Mobile Safari obsługujące pełnoekranowy interfejs API HTML5 (który jest obsługiwany w Safari na OS X!). Niestety, w tej chwili nie ma wsparcia i historycznie wydania punktowe iOS nie dodawały nowych funkcji Safari, więc może to coś dla iOS 8.

AKTUALIZACJA : Istnieje meta właściwość do naprawienia tego obecnie w iOS7.1 Beta zgodnie z tym postem na forum w informacjach o wydaniu.

<meta name="viewport" content="minimal-ui">

Przeprowadziłem test i mogę potwierdzić, że ta funkcja jest obecnie w wersji Beta 2.

UWAGA : Nowa opcja minimal-ui to świetne rozwiązanie, ale musi być częścią odpowiedzi HTML. Próbowałem na iOS7.1 beta3 dołączyć metatag viewport do JS

$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');

wartość „minimal-ui” jest ignorowana przez przeglądarkę.

Aktualizacja: iOS7.1 został już wydany, więc umowa NDA została zniesiona.

<meta name="viewport" content="minimal-ui">

To rzeczywiście poprawny tag i działa w wersji na żywo. Pamiętaj, że „widoczny obszar” może obsługiwać listę oddzieloną przecinkami, jeśli tego potrzebujesz.

Łączę to z innymi zmiennymi mobilnymi, aby strona wyglądała jak aplikacja:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">

-

Z tym też walczyliśmy. Na naszej stronie mamy pasek TabBar i za każdym razem, gdy próbujesz kliknąć kartę, pojawiają się opcje safari.

Dzisiejsza nadzieja. Jeśli jesteś członkiem programu dla programistów Apple, zdecydowanie polecam odwiedzenie tego forum: https://devforums.apple.com/message/927476

W.

EDYCJA 2:

Nie działa od iOS 7.1

EDYTOWAĆ:

W niektórych grach zastosowano nakładkę, która podpowiada graczowi, aby przewijał paski, a następnie blokuje przewijanie, aż paski ponownie wyskoczą. W tym przypadku bardzo position: fixedpomaga, bo stabilizuje ruch (nie da się tego lepiej wytłumaczyć, wystarczy samemu spróbować). Ta gra jest dobrym przykładem takiego podejścia:

www.paf.com/mobile/launch/flowers.html (przepraszam, nie mogę zamieścić więcej niż 2 linki).

Ostatnio natknąłem się również na hack, który dezaktywuje pasek nawigacyjny uruchamiający górny obszar. Wszystko, co musisz zrobić, to dodać losowy element do swojego DOM o następujących stylach:

z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;

Przeczytaj więcej na ten temat tutaj .

Jeśli tworzysz aplikację internetową, możesz utworzyć łącze do adresu URL na ekranie głównym; i użyj następujących metatagów HTML:

<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Spowoduje to nałożenie wskaźników na pasek nagłówka / nawigacji. (Wskaźniki, które widzisz na wszystkich ekranach iPada.

Więcej informacji można znaleźć na stronie : https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Mam nadzieję, że to komuś pomoże, ale nie chciałem ustawiać szerokości widocznego obszaru = szerokości urządzenia ... ponieważ jego 480 pikseli na iPhonie 4 ... i chcę, aby moja gra miała 800 pikseli na wszystkich urządzeniach.

A jeśli tego nie ustawisz, minimal-ui nie zarejestruje.

Moja praca polega na:

<meta name="viewport" content="width=device-width, minimal-ui">

A potem zmiana widoku po załadowaniu strony:

  $(window).load(function(){
    $('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
  });

Jestem zszokowany, że to działa. Pasek adresu i dolne przyciski interfejsu użytkownika pojawiają się tylko wtedy, gdy użytkownik kliknie górną / dolną część ekranu. Uwielbiam to teraz.

To rozwiązanie działało dla mnie, ale w moim przypadku aplikacja internetowa była przeznaczona dla prywatnej publiczności, gdzie miałem kontrolę nad iPadem, który będzie używany.

Próbowałem użyć wszystkich możliwych metatagów i hacków, ale naprawdę, po usunięciu funkcji minimal-ui przez IOS8, było to praktycznie niemożliwe do rozwiązania.

Myśląc nieszablonowo, nasz zespół znalazł dobre rozwiązanie:

Przeglądarka Mercury otwiera się na pełnym ekranie, a pasek adresu nie pojawia się nawet podczas ładowania stron. Jest to mała ikona w prawym dolnym rogu i tylko :) W przypadku naszego problemu zadziałało idealnie!

Ale powtarzam: nie używaj go, jeśli tworzysz aplikację internetową dla ogółu. To straszne, ponieważ UX zmusza użytkownika do pobrania innej przeglądarki, aby uzyskać dostęp do aplikacji.

AKTUALIZACJA

Mój znajomy programista wymyślił takie rozwiązanie:

Użyj widoku internetowego wewnątrz Titanium z appceleratora. Nie zostanie zatwierdzony w sklepie Apple, ale na prywatne wydarzenie będzie działać dobrze!