Aktualizacja wrzesień 2014: iOS 8 usunął tę minimal-ui
funkcję
. 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 BODY
strona). 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.
minimal-ui
, developer.apple.com/library/prerelease/ios/releasenotes/General/ ... , możliwe, że w przyszłości nie będzie możliwości kontrolowania domyślnego zachowania Mobile Safari. stackoverflow.com/questions/24889100/…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.
źródło
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ę.
źródło
<meta name="viewport" content="width=device-width, minimal-ui">
działa dobrze na iPhone 5, z którym testowałem, a także na symulatorze iOS.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.
źródło
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: fixed
pomaga, 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 .
źródło
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
źródło
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.
źródło
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!
źródło