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)
Related
I made simple React app by "create-react-app" function (using hash-router, if it will help), and deployed it on github-pages.
But, unfortunately, non of my pages doesn't hide address bar in mobile browsers when scroll down. Height of pages of course is more then 100%.
Similar problem was there: Force hide address bar in Chrome on Android
, but there is no solution for me.
This is not a hybrid app or something else, it's just a site.
I don't need to hide address bar on load, just only when scrolling down, and pop up it when scrolling up.
I think it's just normal behaviour for site by default, isn't?
Maybe I need to add/delete something in my .html/.css/.jsx/.json files to make it workable (maybe I deleted something important for it, I don't know), but I can't find differences between my site and others sites, written on React or pure html/css/js stack.
I also tried to find information here and in internet, spent about 2 hours on it. I'm desperate.
Have learned following questions here:
hide mobile browser address bar on chrome (android)
How to hide the toolbar in Chrome for Android tablets for a 100% high website
Hide address bar in android chrome browser with scroll down gesture
Hide scroll bar, but while still being able to scroll
How to hide a mobile browser's address bar?
Found a cause. Hope it will help someone who did similar amusing mistake as I.
The point is that I embedded following code to avoid problem with background (it didn't cover whole area of page):
html, body, #root {
width: 100%;
height: 100%;}
It blocks growth of height, of course, despite visually content is more then 100%. And even if I remove #root out of this ruleset, it wouldn't help, although #root would be bigger than html and body.
Solution is to set min-sizes instead (in addition to removing #root, of course):
html, body {
min-width: 100%;
min-height: 100%;}
Sorry for disturbing, guys)
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
I want to hide the URL bar from my single-page application by using JavaScript.
I tried to set bigger height of the 'body' element and then perform:
window.scrollTo(0, 0);
But it doesn't work. The URL bar is still visible. How do I solve this problem?
so far it seems it doesn't work on iOS 9, it stopped working after iOS 7.1.
As seen here:
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
For iPhone, you can make your content just one pixel higher than the viewport, that will eliminate the navbar.
Working code example: http://pastebin.com/16s8Xvbw
Caveats:
Only works in landscape, and when flipping from portrait to landscape - if user enters the page in landscape, he/she must flip to portrait and back to landscape.
If the user touches near top / bottom, navbar will re-appear.
Does not work on iPad at all.
I have a problem with fixed floating menu on android phones browsers (not tested on other phones) and still can't find any solution.
Let's take this as an example: (the first link I found on google)
http://www.backslash.gr/demos/jquery-sticky-navigation/
Scrolling and clicking on menu works, but if I make fast scroll and let the scroll stop automatically 'til it reaches phone browser's bottom or top, the floating menu becomes inactive (not able to click on floating menu, focus-link position is changed). If I make fast scroll and stop scrolling by touching the screen (don't let the scroll to reach bottom or top and stop automatically) the floating menu works and links are active.
I have tried about 10-20 examples I found on google, even bootstrap has the same issue.
Also tried libraries like mCustomScroll and iscrool, but they are too slow for phone browser or have other issues.
Tested on android > 4.x several different phones and versions.
I hope you understood the problem and can suggest anything.
Also it would be nice if anybody could test it on iphone (but I think its Android problem).
Thank you.
Found good enough solution https://github.com/filamentgroup/Overthrow/
So I was able to create fast scrolling page and make workaround for described bug.
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);