Menu
I have set the apple-mobile-web-app-capable to true in my web app's head section. All good, Chrome tries to hide the address bar when possible to give more room to the web app.
Problem is that my app's navigation is on the top and goes behind the address bar during that time. I was wondering if there is a way I could detect when the address bar is showing and dropping the navigation below the address bar.
If I remove the apple-mobile-web-app-capable meta tag, address bar shows, but the navigation still goes behind it. For some reason Chrome sets the window size to the size of the screen, but pulls the address bar on top of it.
Is anyone aware of any solutions to this?
730
To get started enter “about:flags” into the Address Bar and hit Enter. Scroll down until you see the listing for Compact Navigation. Enable it and let the browser restart to gain access to the feature. Once the browser has restarted right click on one of the tabs and select Hide the toolbar from the Context Menu.
In the address bar at the foot of the screen, tap the AA icon at the left end. If you don't see it, swipe down to scroll up on the open web page and it should appear. From the popup menu, tap Show Top Address Bar. The address bar moves instantly.
Full screen mode can cause the address bar missing. On Windows, you can press F11 or Fn + F11 to exit full screen mode in Chrome. On Mac computer, you can hover your mouse at the top of screen and click the green circle at the top-left to exit full screen mode in Chrome.
There is a workaround around this actually; you just have to force your app to scroll down by 1px (enough to hide the Chrome address bar) :
setTimeout(function() {
// Already scrolled?
if(window.pageYOffset !== 0) return;
window.scrollTo(0, window.pageYOffset + 1);
}, 1);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
