Неможливо приховати навігаційні панелі в Safari iOS 7 для iPhone / iPod touch

Я не вірю, що існує якесь рішення для програмного приховування барів за допомогою javascript / css / html, але дозвольте мені спробувати описати проблему. Ми команда розробників мобільних ігор, і ми розробляємо гру протягом одного року.

Після оголошення iOS 7 ми зіткнулися з проблемою, що неможливо приховати навігаційні панелі. Після того, як користувач натискає на верхню або нижню частину браузера Safari, знову з’являються навігаційні панелі, які приховують всі елементи керування грою.

Єдине рішення, яке ми знайшли дотепер, - примусити користувача:

1. Поверніть пристрій
2. Прокрутіть сторінку
3. Додайте програму на головний екран

Жодна з цих альтернатив не є прийнятною. Схоже, Apple знає про цю проблему, але продовжує її ігнорувати. Вони закрили повідомлення про помилку як копію помилки # 14076889.

Я вважаю, що ми не єдина команда, яка стикається з тією ж проблемою. Хтось знає рішення?

Оновлення вересня 2014 року: iOS 8 вилучила minimal-uiфункцію . Знову немає можливості видалити / приховати навігаційні панелі, крім як покластися на поведінку браузера за замовчуванням (смуги будуть приховані під час прокрутки, але лише якщо елемент прокрутки - BODYце сторінка). Єдиним «обхідним шляхом» є збереження програми на головному екрані та встановлення відповідних метатегів (див. Нижче).

Оновлення в серпні 2014 року: iOS 8 (бета-версія) більше не підтримуєтьсяminimal-ui . Тут немає обхідного шляху. (Причиною цього є, мабуть, зловживання веб-сайтами, які використовували його, щоб спробувати перешкодити людям відійти, тому що в iOS 8 Safari можуть бути нові функції, які ще не оприлюднені та замінюють minimal-ui.)

iOS 7.1 додав новий API для вирішення цієї проблеми:

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

Цей новий прапор області перегляду за замовчуванням приховує інтерфейс Safari (відображається лише невеликий рядок заголовка з URL-адресою та індикатором SSL). Щоб отримати доступ до інтерфейсу користувача Safari, користувачі повинні активно торкатися цього рядка заголовка.

Зверніть увагу, що в iOS 7.0.x для цього немає API або відомих обхідних шляхів . У цих версіях, якщо ви хочете назавжди приховати браузер браузера Safari, вам потрібно або змусити користувача додати веб-програму на головний екран (із встановленими відповідними <meta name="apple-mobile-web-app-capable" content="yes">метатегами), або скористатися якоюсь рідною обгорткою додатків, такою як Phonegap, і розповсюджувати через App Store.

Особисто мені хотілося б, щоб вони не видалили кнопку "повний екран", яку вони ввели в альбомному режимі на iOS 6 Mobile Safari, що було чудовим рішенням, яке порадувало розробників та користувачів.

Ідеальним кандидатом для вирішення цього питання стало б для Mobile Safari підтримувати повноекранний API HTML5 (який підтримується в Safari на OS X!). На жаль, наразі немає підтримки, і історично випуски точки iOS не додавали нових функцій Safari, тож, можливо, це щось для iOS 8.

ОНОВЛЕННЯ : Існує мета властивість для виправлення цього в iOS7.1 Beta відповідно до цього повідомлення на форумі в примітках до випуску.

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

Я провів тест і можу підтвердити, що ця функція наразі знаходиться в бета-версії 2.

ПРИМІТКА . Нова опція minimal-ui є чудовим рішенням, але вона повинна бути частиною відповіді HTML. Я спробував на iOS7.1 beta3 додати метатег viewport у JS

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

значення "minimal-ui" браузер ігнорує.

Оновлення: iOS7.1 тепер випущено, тому NDA скасовано.

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

Це справді правильний тег і працює в прямому ефірі. Пам'ятайте, що "viewport" може підтримувати список, відокремлений комами, якщо вам потрібно.

Я поєдную його з іншими мобільними змінними, щоб веб-сайт відчував себе як додаток:

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

-

Ми теж боремося з цим. На нашому сайті є вкладка TabBar, і кожен раз, коли ви намагаєтесь клацнути по вкладці, з’являється елемент керування сафарі.

Сьогодні сподіваюся. Якщо ви є учасником програми для розробників apple, я настійно рекомендую відвідати цей форум: https://devforums.apple.com/message/927476

W

РЕДАКТУВАТИ 2:

Не працює з iOS 7.1

РЕДАГУВАТИ:

Деякі ігри прийняли накладання, яке натякає гравцеві прокрутити стовпці, а потім блокує прокрутку, поки смуги знову не вискакують. У цьому випадку дуже position: fixedдопомагає, оскільки це стабілізує рух (не можу це пояснити краще, просто спробуй сам). Ця гра є хорошим прикладом такого підходу:

www.paf.com/mobile/launch/flowers.html (вибачте, не можу розміщувати більше 2 посилань)

Нещодавно я також натрапив на хакер, який дезактивує панель навігації, що запускається для верхня площа. Все, що вам потрібно зробити, - це додати випадковий елемент до вашого DOM із такими стилями:

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

Детальніше про це читайте тут .

Якщо ви створюєте веб-програму, ви можете створити посилання на URL-адресу з головного екрану; і використовуйте такі метатеги 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">

Це накладе індикатори над панеллю заголовка / навігації. (Індикатори, які ви бачите на всіх екранах iPad.

Для отримання додаткової інформації див .: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Сподіваюся, це комусь допомагає, але я не хотів встановлювати ширину області перегляду = ширина пристрою .., оскільки його 480px на iphone 4 .., і я хочу, щоб моя гра була на 800px для всіх пристроїв.

І якщо ви не встановите його, тоді minimal-ui не реєструється.

Я працюю навколо:

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

А потім змініть область перегляду після завантаження сторінки:

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

Я дуже вражений, що це працює. Адресний рядок і нижня кнопка інтерфейсу користувача відображаються лише тоді, коли користувач натискає верхню / нижню частину екрана. Полюбіть це зараз.

Це рішення працювало для мене, але в моєму випадку веб-програма була призначена для приватної публіки, де я мав контроль над Ipad, який буде використовуватися.

Я намагався використовувати всі можливі мета-теги та хакі, і насправді, після того, як IOS8 видалив функцію minimal-ui, це було практично неможливо вирішити.

Думаючи нестандартно, наша команда дійшла до гарного рішення:

Браузер Mercury відкривається на повноекранному режимі, і навіть коли сторінки заряджаються, адресний рядок не відображається. Це невеличка піктограма внизу праворуч і лише :) Це чудово спрацювало для нашої проблеми!

Але я повторюю: не використовуйте його, якщо ви розробляєте веб-додаток для громадськості загалом. Це страшно для UX, щоб змусити користувача завантажити інший браузер для доступу до програми.

ОНОВЛЕННЯ

Мій друг розробник придумав таке рішення:

Використовуйте веб-перегляд всередині Titanium від appcelerator. Це не буде затверджено в магазині Apple, але для приватного заходу це буде чудово працювати!