Как скрыть новую строку URL на полноэкранном режиме iPad Safari WebApp, появившуюся после iPadOS 13? - PullRequest
Новая
       127

Как скрыть новую строку URL на полноэкранном режиме iPad Safari WebApp, появившуюся после iPadOS 13?

2 голосов
/ 15 октября 2019

iPadOS 13 теперь показывает белую / серую полосу, когда WebApp установлен через Safari с помощью «Добавить на главный экран», даже когда добавлен метатег apple-touch-fullscreen. Панель содержит меню для изменения размера шрифта и запроса рабочего стола сайта, но влияет на доступный размер экрана, так что пользователям теперь приходится прокручивать для просмотра меню приложения.

Есть ли способ скрыть эту панель, напримеркак заставить либо настольный / мобильный сайт, чтобы выбор не требовался?

1 Ответ

2 голосов
/ 22 октября 2019

Я нашел решение этой проблемы.

iPadOS добавляет строку URL в веб-приложения, даже если метатег apple-touch-fullscreen добавлен, но теперь использует файл manifest.json, используемый сПрогрессивные веб-приложения (PWA) для обнаружения полноэкранного режима. Он поддерживал это до версии IOS 13, но только сейчас это требуется для полноэкранного режима.

В моем приложении тег ссылки manifest.json <link rel="manifest" href="manifest.json"> добавлялся ТОЛЬКО при обнаружении Google Chrome;обновление его для добавления ссылки при обнаружении Safari на iPad привело к тому, что серая полоса полностью скрылась (обратите внимание, что обнаружение iPad изменилось в этой версии, теперь можно запрашивать версии для мобильных и настольных компьютеров)

Манифест. Файл js, в котором разрешен полноэкранный режим, показан ниже (отображение: «standalone» разрешает полноэкранный режим) 

{
"name": "MyApp",
"short_name": "MyApp",
"description": "MyApp description",
"version": "0.0.0.1",
"manifest_version": 2,
"default_locale": "en-GB",
"author": "Christopher Dean",
"start_url": "Home.aspx",
"display": "standalone",
"orientation": "landscape",
"theme_color": "#015174",
"background_color": "#F7F4F3",
"icons": [
{
  "src": "images/app-icon-chrome.png",
  "sizes": "128x128",
  "type": "image/png"
},
{
  "src": "images/app-icon-tiny.png",
  "sizes": "32x32",
  "type": "image/png"
},
{
  "src": "images/app-icon-192.png",
  "sizes": "192x192",
  "type": "image/png"
},
{
  "src": "images/app-icon-512.png",
  "sizes": "512x512",
  "type": "image/png"
}
],
"app": {
 "urls": [
   "http://MyApp/Home.aspx"
 ],
 "launch": {
   "web_url": "http://MyApp/"
 },
 "background": {
   "scripts": [ "chrome.js" ]
 },
 "permissions": [ 
  "unlimitedStorage",
  "notifications",
  "fullscreen"
 ]
}
}
...