7

In 2019, I'm seeing a lot of old questions about removing/hiding the status/location bar in iOS for full screen mobile web apps. I've tried several solutions I've found, but nothing is working. I'm running iOS Safari version 13 running on iPhone X and iPhone 11. This needs to happen without the user taking the extra couple steps to add it to the home screen.

I've tried the following:

minimal-ui meta tag:

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

Scrolling to 0,1:

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

apple-mobile-web-app-capable meta tag:

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

I have also combined all of these, and still no luck. Has something changed? Is it the only way to hide the status bar to rotate the device vertical and back to horizontal?

I've seen where Apple suggests not hiding the location bar on the newer phones due to more screen real estate available on newer devices. So did they decide to take the liberty of forcing this preference on us?

BBaysinger
  • 6,614
  • 13
  • 63
  • 132

1 Answers1

17

A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.

Apple - Safari Web Content Guide - Configuring Web Applications

I’m using these meta tags in my 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">

The app-like full screen experience only comes on when a user first adds the PWA to their iOS home screen (using the Share menu), and then opens the app from there.

enter image description here

AndreasPizsa
  • 1,736
  • 19
  • 26
  • 1
    That’s the only way? I don’t want to ask my users to do that. I thought I was clear that this needs to happen in the browser. – BBaysinger Nov 08 '19 at 01:58
  • 1
    Yes, [it’s the only way right now on iOS](https://stackoverflow.com/a/51160938/199263) . Android supports prompting the user automatically, but iOS currently doesn’t. What PWA devs sometimes do on iOS is to add their own prompt and kinda guide the user to the "Add to Home Screen" functionality. It’s not pretty, but that’s what we got :) – AndreasPizsa Nov 08 '19 at 02:02
  • Also to be precise, the user first opens your PWA web site in Safari, then taps the "Share" icon, then taps "Add to Home Screen". It’s not as bad as having to do that from scratch, but still bad enough. – AndreasPizsa Nov 08 '19 at 02:03
  • This makes me lose a bit more love for Apple. – BBaysinger Nov 08 '19 at 02:08
  • the only other option coming into my mind is to convince user to scroll up a bit (there need to be enough height) so the address bar minimizes and toolbar gets hidden. – ciekawy Aug 15 '20 at 06:59