it-swarm.com.ru

Невозможно скрыть навигационные панели в Safari iOS 7 для iPhone / iPod touch

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

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

Единственное решение, которое мы нашли, - это принуждение пользователя к:

  1. Повернуть устройство
  2. Прокрутить страницу
  3. Добавить приложение на домашний экран

Ни одна из этих альтернатив не является приемлемой. Похоже, Apple знает об этой проблеме, но продолжает игнорировать ее. Они закрыли сообщенную ошибку как дубликат ошибки # 14076889.

Я считаю, что мы не единственная команда, которая сталкивается с той же проблемой. Кто-нибудь знает решение?

78
asv2001

Обновление от сентября 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 chrome, вам нужно либо заставить пользователя добавить веб-приложение на домашний экран (с соответствующими метатегами, установленными <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.

118
thomasfuchs

UPDATE: в настоящее время в iOS7.1 Beta есть мета-свойство для исправления в соответствии с это сообщение на форуме на заметки о выпуске.

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

Я запустил тест и могу подтвердить, что эта функция в настоящее время находится в бета-версии 2.

17
Mark

NOTE: Новая опция minimal-ui является отличным решением, но она должна быть частью HTML-ответа. Я пытался на iOS7.1 beta3 добавить метатег viewport с помощью JS

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

значение "minimal-ui" игнорируется браузером.

6
mex23

Обновление: 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

3
William George

РЕДАКТИРОВАТЬ 2:

Не работает с iOS 7.1

EDIT:

В некоторых играх используется наложение, которое подсказывает игроку прокручивать полоски , а затем блокирует прокрутку до тех пор, пока полосы не появятся снова. В этом случае 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;


Подробнее об этом здесь .

2
Mihhail

Если вы создаете веб-приложение, вы можете создать ссылку на 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.

enter image description here

Для получения дополнительной информации см .: https://developer.Apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

1
f1lt3r

Это решение работало для меня, но в моем случае веб-приложение предназначалось для частного публичного доступа, где у меня был контроль над Ipad, который будет использоваться.

Я пытался использовать все возможные метатеги и хаки, и действительно, после того, как IOS8 удалил функцию минимального пользовательского интерфейса, было практически невозможно решить.

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

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

Но я повторяю: не используйте его, если вы разрабатываете веб-приложение для публики в целом. Это ужасно для UX, заставляя вашего пользователя загружать другой браузер для доступа к приложению.

UPDATE

Мой друг-разработчик придумал это решение:

Используйте веб-просмотр внутри Titanium от appcelerator. Он не будет одобрен в магазине Apple, но для частного мероприятия он будет работать просто отлично!

0
Brover

Надеюсь, это кому-нибудь поможет, но я не хотел устанавливать ширину моего окна просмотра = device-width .. потому что его 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')
  });

Я в шоке, это работает. Адресная строка и нижние кнопки пользовательского интерфейса появляются только в том случае, если пользователь нажимает верхнюю/нижнюю часть экрана. Люблю это сейчас.

0
jfaron