Based on nateps work: https://gist.github.com/nateps/1172490

hideAddressbar.js

/**
 * Hide the addressbar on ios & android devices
 * https://gist.github.com/yckart/5609969
 *
 * Based on the work from Nate Smith
 * @see https://gist.github.com/nateps/1172490
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/07/10
 */

;(function(window) {

    window.hideAddressbar = function (elem) {
    
        elem = typeof elem === 'string' ? document.querySelector(elem) : elem;
    
        var ua = navigator.userAgent,
            iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
            ipad = ~ua.indexOf('iPad'),
            ios = iphone || ipad,
            android = ~ua.indexOf('Android'),
            // Detect if this is running as a fullscreen app from the homescreen
            fullscreen = window.navigator.standalone,
            lastWidth = 0;
    
        // We don't go further if we are
        // not on an ios or android device
        // or the passed element was not found
        if (!(ios || android) || !elem) return;
    
        if (android) {
    
            // Android's browser adds the scroll position to the innerHeight, just to
            // make this really fucking difficult. Thus, once we are scrolled, the
            // page height value needs to be corrected in case the page is loaded
            // when already scrolled down. The pageYOffset is of no use, since it always
            // returns 0 while the address bar is displayed.
            window.addEventListener('scroll', function () {
                elem.style.height = window.innerHeight + 'px';
            }, false);
    
        }
    
        var setupScroll = function () {
    
            var height = 0;
    
            // Start out by adding the height of the location bar to the width, so that
            // we can scroll past it
            if (ios) {
    
                // iOS reliably returns the innerWindow size for documentElement.clientHeight
                // but window.innerHeight is sometimes the wrong value after rotating
                // the orientation
                height = document.documentElement.clientHeight;
    
                // Only add extra padding to the height on iphone / ipod, since the ipad
                // browser doesn't scroll off the location bar.
                if (iphone && !fullscreen) height += 60;
    
            } else if (android) {
    
                // The stock Android browser has a location bar height of 56 pixels, but
                // this very likely could be broken in other Android browsers.
                height = window.innerHeight + 56;
    
            }
    
            elem.style.height = height + 'px';
    
            // Scroll after a timeout, since iOS will scroll to the top of the page
            // after it fires the onload event
            setTimeout(scrollTo, 0, 0, 1);
    
        };
    
        (function resize() {
            var pageWidth = elem.offsetWidth;
    
            // Android doesn't support orientation change, so check for when the width
            // changes to figure out when the orientation changes
            if (lastWidth === pageWidth) return;
            lastWidth = pageWidth;
    
            setupScroll();
    
            window.addEventListener('resize', resize, false);
        }());
    
    };

}(this));

hideAddressbar.min.js

/**
 * Hide the addressbar on ios & android devices
 * https://gist.github.com/yckart/5609969
 *
 * Based on the work from Nate Smith
 * @see https://gist.github.com/nateps/1172490
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/07/10
 */
 
;(function(a){a.hideAddressbar=function(g){g=typeof g==="string"?document.querySelector(g):g;var b=navigator.userAgent,i=~b.indexOf("iPhone")||~b.indexOf("iPod"),k=~b.indexOf("iPad"),f=i||k,e=~b.indexOf("Android"),j=a.navigator.standalone,c=0;if(!(f||e)||!g){return}if(e){a.addEventListener("scroll",function(){g.style.height=a.innerHeight+"px"},false)}var h=function(){var l=0;if(f){l=document.documentElement.clientHeight;if(i&&!j){l+=60}}else{if(e){l=a.innerHeight+56}}g.style.height=l+"px";setTimeout(scrollTo,0,0,1)};(function d(){var l=g.offsetWidth;if(c===l){return}c=l;h();a.addEventListener("resize",d,false)}())}}(this));

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width">
    <title>hideAddressbar.js</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        #page {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 8px solid #f00;
        }
    </style>
</head>
<body>
    <div id="page"></div>

    <script src="hideAddressbar.js"></script>
    <script>hideAddressbar('#page');</script>
</body>
</html>

Awesome! Thanks man!

Hi Yannick

Thanks for this.

Minor typo: hideAdressbar should be hideAddressbar (double-d in address), no?

Forgive my ignorance, but how do I use it?

I can follow pretty much all of the detail, but I don't understand how it has been packaged, i.e. the first 3 lines and last line of code.

I'm supposed to call hideAddressBar with some parameter?

Thanks for any help.

@terraling

At the first, thanks for the spellingcorrection :)

To your question, I'll split it up:

// we start with an anonymous self invoked function wrapper
// it holds `window` as parameter (referenced in the last line)

// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;(function(window) {

    // now we expose `hideAddressbar` to the global window-object
    // to make it accessible outside of our anonymous function
    window.hideAddressbar = function (elem) {

        // this step is a pretty simple type-detection
        // to check if the passed argument is a string or not
        // if it is, we use `querySelector` to catch the element from our DOM
        // otherwise we use the raw DOM-Node
        elem = typeof elem === "string" ? document.querySelector(elem) : elem;

// this closes our anonymous function and invokes it
// we pass `this` in it, because it referes to the most global object in what we are
// in most cases (browsers) it is the window-object, if you use something like require.js
// it refers to the `define`-scope
}(this));

Something about anonymous functions: http://en.wikibooks.org/wiki/JavaScript/Anonymous_Functions

I've added an index.html-file to show up how to use it:

https://gist.github.com/yckart/5609969#file-index-html

This don't work for me on my Google Nexus4 Android 4.*** Some one can help me ?

Doesnt work on chrome for ios7 / iPhone 4s
Doesnt work on chrome for android 4.2 / Nexus 10

@LeCanardNoir @Romainpetit Since I made this gist, there are a lot of new devices / os-updates out there... If I get the time I'll push this to the next level... Though it would be great if you could help to fiddle the cross-device support out.