Detect when the Chrome for iOS address bar is showing - javascript

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?

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

Related

Browser / address bar when scrolling mobile browsers by click

I’m struggling against a scrolling issue with mobile browsers on both iOS and Android. Expected behaviour is the top browser bar disappearing or getting minimized as soon as I start scrolling the page down by swiping my finger to the top.
Unfortunately the behaviour of the browser bar is completely different when the scrolling isn’t done by hand but by clicking a link to target an anchor. While the page scrolls to the anchor as expected, nothing at all happens to the browser bar. As long as I don’t swipe with my finger, the bar is staying in place without any changes.
I tried several settings in meta/vieport and javascript like this without success:
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
How can I make the browser to behave the same way, no matter whether I’m scrolling with a swipe or a click? I can live quite well with the differences among browsers, but would appreciate very much if the same browser would act always the same way in both situations.
Thanks for any hint
Ralf

Hide browser bar in mobile version

I am trying to hide the browser in mobile version and have tried to use below on load:
<script>
window.addEventListener("load",function() {
setTimeout(function(){
// This hides the address bar:
window.scrollTo(0, 5);
}, 0);
});
</script>
However this isn't working on my android device it is only scrolling down 5px and not hiding browser bar as if human scrolled down. I feel like this has something to do with viewport but can't figure.
I have tried to follow https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ as well but I can only it make it work with click. I don't really want to go full screen really just hide browser as if user has scrolled down on load (if scrolled up than visible again).
I found a site that has something similar (https://www.webpagefx.com/blog/internet/interstitial-ads-google-hate/amp/) - this happens when you enter via link google search and before entry into site the browser bar has already been hidden, ie scrolled down to google search.
If anyone can help point to right direction that would be helpful so I canget started to code the script that I need. Ideal android and ios resolution (if not than just android)

Why is my nav bar with 'position:fixed' displaying at bottom of web page not bottom of viewport on mobile?

I have a navigation bar which has its position set to fixed. This works fine as expected on browesrs and on mobile browsers as expected. The navigation bar is positioned at the botton of the viewport and everything else scrolls under it.
But then same page when moved to a mobile web view in an app, it render the navigation bar at the very end of the page so that I have to scroll down to see it.
I comes on the device view only when I change the top position to around 50%.
It also seems that if I remove everything from that page with only empty , I still see vertical scroll bar even though my page is empty.
Using position: fixed on mobile devices has several known issues. Among them is the behavior of the fixed element, which doesn't always stay fixed.
Although your problem may be in your code, that may not be the problem since you mention that your nav bar is working well across various mobile browsers.
Here's a review of position: fixed tested across multiple mobile platforms and devices:
Fixed Positioning in Mobile Browsers
Here's an answer I provided to a related question a few days ago:
Enable mobile device users to toggle div between position: fixed and position: static (or 'relative')
Hope this helps. Good luck!

How to detect if browser address bar is showing on iOS devices?

Is there a way to consistently detect if the browser address bar is showing?
We have a HTML5 app and want to show a special link if the address bar is showing, encouraging users to add the app to their home screen for a better experience.
You should take a look at the window.innerHeight property.
That is the height of the content on screen.
The value of that decrease a lot when the address bar is visible.
You may need to test out the decrease in height on different device to make that work better

Hide iOS/mobile address bar in galleria fullscreen mode

I'm putting together a responsive galleria slideshow on a drupal site with the galleria module and the galleria 'twelve' theme, using omega as my drupal base theme. Everything is working very well, except that when I enter fullscreen on my iPod I can't get rid of the address bar. I'd also like to make the bottom toolbar go away if possible. Together they take up quite a bit of space.
Any suggestions? I've seen a few methods to accomplish this (in a more general way, not specific to galleria) with some javascript, but that's not my strong suit, and I wouldn't know how to implement those solutions.
To hide the address bar on iOS you just need to scroll the page a little
window.onload = function() {
// x/y coordinates, "1" will cause the address bar to hide
window.scrollTo(0, 1);
};
The bottom bar can't be hidden while in the browser. However, you can add the website to the home screen which will make hiding the address bar and bottom toolbar possible by adding a meta tag:
<meta name="apple-mobile-web-app-capable" content="yes">

Categories