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

Ответ 1

Обновление сентябрь 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">

Этот новый флаг viewport скрывает интерфейс 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.

Ответ 2

UPDATE. Существует мета-свойство для исправления этого в настоящее время в бета-версии iOS7.1 в соответствии с этим сообщением форума в примечаниях к выпуску.

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

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

Ответ 3

ПРИМЕЧАНИЕ. Новый параметр min-ui - отличное решение, но он должен быть частью ответа HTML. Я попытался использовать iOS7.1 beta3 для добавления метатега viewport с помощью JS

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

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

Ответ 4

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

Ш

Ответ 5

ИЗМЕНИТЬ 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;

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

Ответ 6

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

Ответ 7

Надеюсь, это кому-то поможет, но я не хочу устанавливать ширину вьюпорта = ширина устройства... потому что его 480px на iphone 4.. и я хочу, чтобы моя игра была на 800 пикселей для всех устройств.

И если вы его не установили, то минимальный-ui не регистрируется.

Моя работа работает:

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

Затем измените окно просмотра после загрузки страницы:

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

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

Ответ 8

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

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

Мышление вне поля, наша команда достигла хорошего решения:

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

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

UPDATE

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

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