admin管理员组

文章数量:1326504

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

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

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

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./web/fundamentals/native-hardware/fullscreen/

• javascript
• html
• reactjs
• url
• mobile

Share Improve this question Follow asked Mar 19, 2020 at 20:39 Dino PizzaDino Pizza 20311 gold badge22 silver badges66 bronze badges 8

• 2 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. – Aaron Sarnat Commented Jul 23, 2021 at 1:11
• 2 Google Maps does something like this: html, body, { width: 100%; height: 100%; } body { margin: 0; overflow: hidden; } to take up maximum real estate without scrolling, and they appear to have some logic tied to the map canvas to intercept touch events so the page won't rubber-band unless the user drags from part of the page that isn't intercepting touch events. – Aaron Sarnat Commented Jul 23, 2021 at 1:20
• 2 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.) – Joel Rummel Commented Jul 23, 2021 at 18:05
• Does this answer your question? How to hide a mobile browser's address bar? – Spectric Commented Jul 25, 2021 at 15:40
• 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 – JoelBonetR Commented Jul 26, 2021 at 11:00

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 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. Source: https://developer.apple./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.

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

本文标签： javascriptHide mobile browser39s address bar on load (IOSAndroid) in ReactStack Overflow