Solution 1 :

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.

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.

Solution 2 :

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…

Problem :

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.



Comment posted by Aaron Sarnat

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.

Comment posted by Aaron Sarnat

Google Maps does something like this:

Comment posted by Joel Rummel

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

Comment posted by How to hide a mobile browser’s address bar?

Does this answer your question?

Comment posted by JoelBonetR

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

Comment posted by wlf

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.

Comment posted by Aidin

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.