Скрытие компонентов пользовательского интерфейса Safari на iPhone - PullRequest
21 голосов
/ 08 ноября 2008

При попытке скрыть компоненты пользовательского интерфейса Safari для веб-приложения, помеченного как значок на главном экране. Я использую этот метатег

<meta name="apple-mobile-web-app-capable" content="yes" />

, как указано в iPhone Dev Center , но адресная строка и панель инструментов по-прежнему присутствуют при запуске со значка главного экрана. Что мне нужно сделать по-другому? У кого-нибудь есть пример?

Ответы [ 13 ]

30 голосов
/ 20 июля 2010
window.top.scrollTo(0, 1);

Работает на iPhone, но не на iPad. Я успешно скрывал компоненты браузера на iPad (так, вероятно, везде), используя

<meta name="apple-mobile-web-app-capable" content="yes" />

и запуск с домашней страницы ссылки. Я также использую

<meta name="viewport" 
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Я не пытался проверить, не скрыты ли компоненты браузера, если я пропущу свойства области просмотра.

7 голосов
/ 08 ноября 2008

Это запускается с домашнего экрана? Документация на связанной странице не упоминается, но я нашел это @ Настройка веб-приложений :

Например, вы можете указать значок для своего веб-приложения, который будет отображаться при добавлении на главный экран, как описано в разделе «Указание значка веб-страницы для веб-клипа». Вы также можете свернуть Safari на iPhone пользовательский интерфейс , как описано в «Изменение внешнего вида строки состояния» и «Скрытие компонентов пользовательского интерфейса Safari» при запуске веб-приложения с главного экрана . Это все дополнительные параметры, которые при добавлении в ваш веб-контент игнорируются другими платформами

6 голосов
/ 05 января 2010

Вы пытались добавить ...

<meta name="apple-touch-fullscreen" content="yes" />
3 голосов
/ 20 октября 2011

Из того, что я могу сказать, iOS обращает внимание на флаги, только когда вы действительно добавляете приложение. Если штука с поддержкой apple-mobile-web-app сначала не работает, попробуйте удалить приложение с главного экрана, а затем повторно добавить его.

Я провел несколько экспериментов и нашел:

  • расположение метатега в заголовках не имеет значения (я думал, что это возможно!)
  • после добавления приложения и правильного удаления адресной строки, если вы затем удалите метатеги с веб-страницы, iOS продолжит удалять панель инструментов.
  • даже после перезагрузки устройства оно все еще «запоминает», удалять ли панель инструментов. Единственный способ сброса этого поведения, который я нашел, - это удалить и повторно добавить приложение.

Надеюсь, это поможет!

2 голосов
/ 16 июня 2010

Я знаю, что это довольно старо, но я сталкивался с этим во время поиска решения. Я смог исправить это, добавив:

window.top.scrollTo(0, 1);

к методу загрузки тела. Надеюсь, что это поможет кому-то еще сталкиваться с этим.

1 голос
/ 17 мая 2014

Существует новая директива, называемая «minimal-ui», которую учитывает браузер iOS (по крайней мере, на iPhone, где я тестировал). Панели инструментов скрыты до тех пор, пока пользователь не нажмет на строку состояния сверху. Очень хорошо для одностраничных приложений!

Вот фрагмент кода, который я использую:

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

1 голос
/ 30 августа 2012

Попробуйте это

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width; user-scalable=0;">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="icon.png">
0 голосов
/ 21 марта 2014

Начиная с iOS 7.1, вы можете использовать minimal-ui

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
0 голосов
/ 30 апреля 2013

все вышеперечисленные метатеги и window.scrollTo, у меня не работает на ipad, Я нашел кнопку в Safari рядом с закладками, где вы получаете опцию «Добавить на домашний экран», она создает новый значок плитки, и вы можете запускать ваше веб-приложение как собственное приложение, и там нет адресной строки.

...