mobile-safari-window-height.js

// tests
// returns height of the screen including all toolbars
// requires detection of orientation. (320px for our test)
// window.orientation === 0 ? screen.height : screen.width

// returns height of the visible area
// it decreases if you zoom in
// window.innerHeight

// returns height of screen minus all toolbars
// problem is that it always subtracts it with height of the browser bar, no matter if it present or not
// fullscreen mode it always returns 320px. 
// doesn't change when zoom level is changed.
// document.documentElement.clientHeight

// detect height
// caveat 01: windows.innerHeight always returns a rounded value causing pixel perfect inconsistencies on zoom
// caveat 02: returns incorrect value on zoom in near top bar.

var getIOSWindowHeight = function() {
    // Get zoom level of mobile Safari
    // Note, that such zoom detection might not work correctly in other browsers
    // We use width, instead of height, because there are no vertical toolbars :)
    var zoomLevel = document.documentElement.clientWidth / window.innerWidth;

    // window.innerHeight returns height of the visible area. 
    // We multiply it by zoom and get out real height.
    return window.innerHeight * zoomLevel;
};

// You can also get height of the toolbars that are currently displayed
var getHeightOfIOSToolbars = function() {
    var tH = (window.orientation === 0 ? screen.height : screen.width) -  getIOSWindowHeight();
    return tH > 1 ? tH : 0;
};