<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
<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.
There is a hack to do this on iOS, but not programmatically.
Add to Home Screenfavicon.ico or another icon in the public folder. You can’t change the icon manually, only the name.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):
References: https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
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.
Google Maps does something like this:
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.)
Does this answer your question?
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
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.
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.