Clever Geek Handbook

Address bar for mobile Safari

I am having a very strange problem with my address bar for the responsive version of my site, http://beta.life.edu . Everything seems to work correctly, except for the address bar, which in principle never crashes when scrolling down the page. I've tested this on the following LIVE devices: iPhone 5C (iOS7), iPhone 6 (iOS 8), iPad Mini (iOS 7), iPad Mini w / Retina (iOS 8), Google Nexus 5 (Lollipop), Google Nexus 7 (Lollipop ), all with the same results.

in the tag html

, I applied the following css which I thought caused this behavior, but either I am wrong or I have another problem:

html {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

I've read a lot of forum posts about this, but any solution I've tried doesn't change anything, so obviously there is something wrong with scrolling in general on this site. It is a common practice to add code that automatically launches your site after the page loads, but that doesn't solve my problem as the address bar is never hidden when scrolling.

+3


source to share


2 answers


So, I'm not entirely sure why this is the case, but on my tag body

I have a declaration overflow-x: hidden

. I moved it from this to my site's wrapper class and everything is fixed. Thanks for the effort, @ abdelrahman-wahdan



+1


source


Just add the Javasript code:

    // When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

The window.scrollTo method is the key to hiding the address bar. The iphoneTimeout function for packaging requires the iPhone to hide the address bar correctly - not using setTimeout will cause problems.

Bonus: META tag for bookmarked sites



If the user has added your web app to their trampoline, the following meta tag can remove the top bar from the browser:

<meta name="apple-mobile-web-app-capable" content="yes" />

And it's all! The address bar is hidden until the user slides past the top bar of the application.

Source: http://davidwalsh.name/hide-address-bar

0


source






More articles:


All Articles