Q: Hide mobile browser's address bar on load (IOS / Android) in React 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:

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): 


*

*manifest.json > "display": "standalone" > This makes the URL bar disappear only when the page is saved to homepage (Not a good option)

*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/

A: 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.

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

*

*In safari, go to the website

*click the up arrow-box icon, and select Add to Home Screen

*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.

*Now the icon is on the home screen and safari doesn't open up the navigation controls

*profit...

