How can I hide the new url bar on iPad Safari WebApp fullscreen mode, appearing since iPadOS 13?

问题

iPadOS 13 now shows a white/grey bar when a WebApp is installed via 'Add to Home Screen' on Safari, even when apple-touch-fullscreen meta tag is added. The bar includes a menu to resize font and request desktop site, but has affected the available screen size so that the users now have to scroll to view the app menu.

Is there any way to hide this bar, such as forcing either Desktop/Mobile site so that the selection is not required?

回答1:

I have found out the solution to this.

iPadOS does add the url bar to web apps even if the apple-touch-fullscreen meta tag is added, but now uses the manifest.json file used with Progressive Web Apps (PWA) to detect fullscreen mode. It has supported this before version IOS 13 but only now is it required for the fullscreen experience.

In my application the manifest.json link tag <link rel="manifest" href="manifest.json"> was ONLY being added when Google Chrome is detected; updating it to add the link when Safari on the iPad is detected resulted in the grey bar being hidden completely (Note that iPad detection has changed in this version now that mobile/desktop versions can be requested)

The manifest.js file that allowed fullscreen is shown below (display: "standalone" allows fullscreen)

{
"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"
 ]
}
}

来源：https://stackoverflow.com/questions/58393922/how-can-i-hide-the-new-url-bar-on-ipad-safari-webapp-fullscreen-mode-appearing

标签

html

safari

ipados

ipados13