Thursday 22 July 2021

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:

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/



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

No comments:

Post a Comment