16

Safari and Chrome on mobile devices both include a visible address bar when a page loads. As the body of the page scrolls, the URL bar minimises:

enter image description here

My project is based on React JS and I am trying to achieve this result on page load (So no user interaction needed, page needs to load with the URL bar minimised. My web-app is made of a single page and no scrolling is possible (Application similar to Google Maps).

What I have tried so far (on an iPhone X):

  1. manifest.json > "display": "standalone" > This makes the URL bar disappear only when the page is saved to homepage (Not a good option)
  2. window.scrollTo(0, 1); in index.js (So it gets called on load), nothing happening, perhaps triggering only onScroll, but I can't do that.

References: https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

Dino Pizza
  • 173
  • 1
  • 1
  • 6
  • 2
    I don't think what you're trying to do is possible, at least not in Mobile Safari. Apple does a good job keeping pages in a walled garden, and for good reason. I'd argue it would be an invasive UX to take over a user's default browser control visibility state as suggested. Full-screen, native experiences are a privilege reserved for user-installed applications. I'd instead design your web app around maximum available viewport real estate set by the mobile browser which is what Google Maps, Bing Maps etc. do for their web versions. They settle for browser UI being visible at all times. – Aaron Sarnat Jul 23 '21 at 01:11
  • 2
    Google Maps does something like this: `html, body, { width: 100%; height: 100%; } body { margin: 0; overflow: hidden; }` to take up maximum real estate without scrolling, and they appear to have some logic tied to the map canvas to intercept touch events so the page won't rubber-band unless the user drags from part of the page that isn't intercepting touch events. – Aaron Sarnat Jul 23 '21 at 01:20
  • 2
    As mentioned, this is almost certainly impossible - and honestly, that's probably for the best. I would hate for a website to decide whether or not my browser controls are visible (could you imagine if any ol scammy website could permanently hide your bottom broswer control bar? Blegh.) – Joel Rummel Jul 23 '21 at 18:05
  • Does this answer your question? [How to hide a mobile browser's address bar?](https://stackoverflow.com/questions/37395561/how-to-hide-a-mobile-browsers-address-bar) – Spectric Jul 25 '21 at 15:40
  • I don't know if it helps, but you can achieve this on Android by keeping your webApp wrapped in a webview and then choose whether to show the features you want from the embedded browser. Never used react native -yet- but if you raise your own system browser it should be possible. Know nothing about apple – JoelBonetR Jul 26 '21 at 11:00
  • https://stackoverflow.com/questions/37395561/how-to-hide-a-mobile-browsers-address-bar – Matthias Aug 24 '21 at 00:34
  • I just downvoted all the 8 answers on the other question: https://stackoverflow.com/questions/37395561/how-to-hide-a-mobile-browsers-address-bar it's still an open question. – Aidin Dec 05 '21 at 18:27

2 Answers2

0

For Safari:

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

If content is set to yes, the web application runs in full-screen mode. Source: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

For Chrome:

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

It does the same thing as the above one but, this is for android and the above one is for ios.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Aditya Thakkar
  • 39
  • 3
  • i didn't downvote but this doesn't work to me. i tried it on an https website with an android 9+chrome/firefox and with an iphone 5+safari. – wlf Jul 28 '21 at 00:03
  • 1
    1) The ask is not about running in full-screen mode. See the bold part of the question. It's just programmatically minimizing the URL bar, the same way it happens when you scroll. 2) You are talking about a PWA. Here, it's a normal page that people land on. And suddenly going to full-screen requires a user consent. – Aidin Dec 05 '21 at 18:30
-5

There is a hack to do this on iOS, but not programmatically.

  1. In safari, go to the website
  2. click the up arrow-box icon, and select Add to Home Screen
  3. The Icon used for the app will be taken from the favicon.ico or another icon in the public folder. You can't change the icon manually, only the name.
  4. Now the icon is on the home screen and safari doesn't open up the navigation controls
  5. profit...
Lacrosse343
  • 491
  • 1
  • 3
  • 18