IOS 7 - css - html height - 100% = 692px

Solution 1:

I used this JavaScript solution for solving that problem:

if (
    navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && 
    window.innerHeight != document.documentElement.clientHeight
) {
    var fixViewportHeight = function() {
        document.documentElement.style.height = window.innerHeight + "px";
        if (document.body.scrollTop !== 0) {
            window.scrollTo(0, 0);
        }
    };

    window.addEventListener("scroll", fixViewportHeight, false);
    window.addEventListener("orientationchange", fixViewportHeight, false);
    fixViewportHeight();

    document.body.style.webkitTransform = "translate3d(0,0,0)";
}

Solution 2:

I believe this is a bug in iOS 7 - if you rotate it to portrait mode, it sets both (innerHeight/outerHeight) to the same value. If it isn't a bug, then portrait mode has one because the behavior isn't consistent.

You could detect iOS 7/mobile Safari and use window.innerHeight if iOS 7.

Solution 3:

I'll combine the answers. Thanks all!

You can do something like this:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('#yourDivID').height(window.innerHeight);
    window.scrollTo(0, 0);
}

The window.scrollTo solves the issue of the bar overlapping in landscape when rotating.

Cheers!