Hide iOS 13 "address bar"

[Nermal]

We have an internal website that's made to look like a native app, but runs through the browser (using <meta name="apple-mobile-web-app-capable" content="yes" />). Most staff have done "Add to Home Screen", so that it shows up like a normal app. In iOS 12 this had the standard status bar with Wi-Fi signal strength etc, then the site filled the rest of the screen.

However, in iOS 13, there is now a rather thick "address bar" between the status bar and our page. This has the URL to the page (which you can't change) and an "aA" button to change the zoom level, enable content blocking, etc.

How can we get rid of this extra bar so that our content fills the screen again? There's presumably a meta tag or some JavaScript or something, but I'm having trouble finding the right search terms. Can anyone help?

 

[Puppuccino]

There used to be a meta tag you could use to have it always minimised which worked in older iOS versions. I think it was around iOS 7 to 10 or something but it's long since been deprecated and doesn't work in iOS 13.

I think you need to try and cheat the system in a sense by making the page appear like it's scrollable when it's not. This may provide some assistance in that: https://stackoverflow.com/q/4117377

This may also work, although it's from a few years ago; https://stackoverflow.com/a/37262383

 

[Nermal]

Thanks. It looks like setting "display" to "standalone" might do the trick. However, it'll be a while before I get to try it, due to the Christmas break.

 

[Nermal]

OK, it's a new year, I'm back at work and I've had a chance to try this.

I've created a "manifest.webmanifest" file and have linked it from the head of the main page (using <link rel="manifest" href="iOS/manifest.webmanifest" />). I've removed the old <meta name="apple-mobile-web-app-capable" content="yes" /> tag.

In the manifest itself:

{
  "name": "(Name of app)",
  "display": "standalone",
  "icons": [
    {
      "src": "iOS/apple-touch-icon.png",
      "sizes": "60x60",
      "type": "image/png"
    },
    {
      "src": "iOS/apple-touch-icon-76x76.png",
      "sizes": "76x76",
      "type": "image/png"
    },
    {
      "src": "iOS/apple-touch-icon-120x120.png",
      "sizes": "120x120",
      "type": "image/png"
    },
    {
      "src": "iOS/apple-touch-icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }
  ]
}

This fixes the address bar problem

But... the custom icon doesn't show up on the home screen; it simply shows a screenshot of the page. I've tried both with and without <link rel="apple-touch-icon" ...> in the HTML and it doesn't make a difference. I've also tried putting an extra "/" in front of the image paths in case it was looking in "iOS/iOS" for them.

To clarify, the icon showed up correctly (using <link rel="apple-touch-icon">) before adding the manifest file.

Any ideas?