iPad WebApp в полноэкранном режиме в Safari

83

Apple сообщает в справочнике Safari HTML, что приведенный ниже код должен сделать веб-приложение полноэкранным на iPhone OS 2.1 и новее.

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

Но похоже, что это не работает. Есть ли способ скрыть строку заголовка / местоположения в Safari в iPad WebApp?

ipad web-applications iphone-standalone-web-app ChrisB
источник

Ответы:

120

Это работает только после того, как вы сохраните закладку в приложении на главном экране. Нет, если вы просто заходите на сайт в обычном режиме.

Jamone
источник
13
Если вы добавите этот метатег на свою старую веб-страницу с URL-адресом, которую вы ранее просматривали в Safari, вам необходимо сначала обновить URL-адрес, а затем добавить его на рабочий стол, чтобы метатег работал.
Скотт Чу
Это не работает для меня в проекте laravel. Я добавил это в свой шаблон макета app.blade. Это используется каждой из моих страниц, поэтому заголовок должен (и появляется) на каждой странице. Тем не менее, у меня все еще есть панели Safari на моем iPhone и iPad, даже после того, как я провел множество тестов по очистке кеша, воссоздавая ярлык на главном экране, как упоминалось в этом посте. Есть ли что-то еще, что может помешать сафари-барам спрятаться? pastebin.com/iSFDXjFz вот главный раздел моего файла app.blade.php. Заранее спасибо.
Frantumn 01
14

Если вы хотите оставаться в браузере, не открывая новое окно, используйте этот HTML-код:

<a href="javascript:this.location = 'index.php?page=1'">
Ремко де Йонг
источник
4
Кажется, это не имеет отношения к рассматриваемому вопросу или теме. Не могли бы вы объяснить, как это связано?
Skeggse
6
Очень актуально. Это всегда следующая проблема после запуска полноэкранного веб-приложения.
shrimpwagon
Для меня следующая проблема - «как мне обновить страницу теперь, когда она находится в полноэкранном режиме?»
Ник
13

  1. Сначала запустите браузер Safari с главного экрана и перейдите на веб-страницу, которую вы хотите просмотреть в полноэкранном режиме.

  2. Найдя веб-страницу, нажмите на значок стрелки в верхней части экрана.

  3. В раскрывающемся меню нажмите на опцию Добавить на главный экран.

  4. Должно появиться окно «Добавить на главную». Вы можете настроить описание, которое будет отображаться как заголовок на главном экране вашего iPad. Когда вы закончите, нажмите кнопку «Добавить».

  5. На главном экране должен появиться новый значок. При нажатии на значок откроется веб-страница в полноэкранном режиме.

Примечание. Значок на главном экране iPad открывает страницу с закладкой только в полноэкранном режиме. Следующая страница, которую вы посетите, будет содержать адрес Safari и строки заголовка. Этот способ воспроизведения вашей веб-страницы или презентации HTML5 в полноэкранном режиме работает, если исходный код веб-страницы содержит следующий тег:

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

Вы можете добавить этот тег на свою веб-страницу, используя сторонний инструмент, например iWeb SEO Tool или любой другой, который вам нравится. Обратите внимание, что вам нужно сначала добавить тег, обновить страницу, а затем добавить закладку на главный экран.

Code.Town
источник
Вы могли бы сказать, что это прямая копия инструкции, найденной на ispringsolutions.com/articles/… :-)
Йохем Шуленклоппер,
3
И, возможно, они скопировали мой. :) Посмотрите на дату, когда я ответил на этот вопрос, и сравните ее с датой публикации.
Code.Town
Ура! Это какой-то ты. :)
Code.Town
7

Он открывает только первую (отмеченную закладкой) страницу в полноэкранном режиме. Любая следующая страница будет открыта, и адресная строка снова станет видимой. Какой бы метатег вы ни поместили в заголовок страницы ...

Юп Стрингер
источник
stackoverflow.com/questions/6429492/…
Alpha Codemonkey
1

Этот сайт имеет рабочий обходной путь, тот же эффект, использует некоторый javascript для установки первого дочернего div на общую высоту области просмотра. http://webapp-net.com/Demo/Index.html

xiatica
источник
0

Похоже, что большинство ответов в этой ветке не поспевают. iOS Safari на iPad теперь поддерживает полноэкранный режим, и его очень легко реализовать с помощью javascript.

Вот моя полная статья о том, как реализовать полноэкранный режим в вашем веб-приложении.

Марвин Даниг
источник