Скрыть панель состояния / местоположения для полноэкранных веб-приложений на iOS для мобильных устройств Safari 13 (iPhone X и 11) - PullRequest
1 голос
/ 04 ноября 2019

В 2019 году я вижу много старых вопросов об удалении / скрытии строки состояния / местоположения в iOS для полноэкранных мобильных веб-приложений. Я пробовал несколько решений, которые я нашел, но ничего не работает. Я использую iOS Safari версии 13 на iPhone X и iPhone 11. Это должно произойти без дополнительных действий пользователя, чтобы добавить его на главный экран.

Я пробовал следующее:

minimal-ui метатег:

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

Прокрутка до 0,1:

setTimeout( function () {
    window.scrollTo(0, 1);
}, 1000);

apple-mobile-web-app-capable метатег:

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

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

Я видел, где Apple предлагает не скрывать панель местоположения на новых телефонах из-за большего количества экранного пространства, доступного нановые устройства. Итак, решили ли они навязать нам это предпочтение?

1 Ответ

6 голосов
/ 08 ноября 2019

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

Apple - Руководство по веб-контенту Safari - Настройка веб-приложений

Я используюэти метатеги в моем PWA, Emoji Bombs :

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

Полноэкранный режим, похожий на приложение, появляется только тогда, когда пользователь впервые добавляет PWA на домашний экран iOS (с помощью меню «Поделиться»), а затем открывает приложение оттуда.

enter image description here

...