How to hide page zoom bar on iPad/iPhone with iOS 13

user_769726 0
Viewed 1311

We have a webapp that we add to the home screen from Safari. It's built with Ionic /Angular. Now whenever we switch to another page within the app, the white bar at the top appears where you can change the page zoom and access other settings (change between mobile and desktop website and access further website settings). It's covering part of the webapp and does away when you click on "Done" on the left side - until you access another page, then it re-appears. It's the same behaviour on iPad and iPhone, iOS 13.1 and 13.2 (beta).

Is there a way to prevent this from appearing?

iPad top bar

The webapp has set the following meta tags, among others:

    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-title" content="MyWebApp">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
progressive-web-apps safari ios
2 Answers

If the new page that you’re opening is from a different website, such as an oAuth login, I don’t think you can fix this issue yet.

However, if the new page is on the same domain, you can simply adjust your app’s scope in your web app manifest. If you don’t already have a manifest, it looks like this:

{
  "name": "My web app",
  "short_name": "Web App",
  "description": "This is a web app",
  "lang": "en-GB",
  "start_url": "/app/home.html",
  "scope": "/app/",
  "display": "standalone"
}

That scope item means that all files, and pages, in the app directory will work in your PWA like a normal native app (ie. no popup windows). All files outside this scope will open in the normal web browser, with a back button to your PWA. It’s not ideal but it does give a much better UX than before. You can read more about the scope setting here.

I would recommend using a manifest.json generator like this one, just because they make this process so much easier. You’ll find the scope setting under the ‘start url’ box in this example.

user_85882280

I have the same problem... I have only been able to find a solution to remove the word "Done" from the left side of toolbar.

change any redirects from location.href='yourUrl' to location.replace('yourUrl') and it should remove the word "Done"

I cannot take credit, and I cannot find the post where i learned this.

It actually stopped the redirection out of the web-app which is a good first step. I will continue to look for a way to remove that URL bar... Hope this helps

user_41213840
Related