Hide mobile browser's address bar on load (IOS / Android) in React

user_11805570 0
Viewed 11514

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/

reactjs mobile url html javascript
2 Answers
user_165306420

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...
user_95541720
Related