Mobile Safari $(window).height() URL bar discrepancy

Question

I'm trying to set a fixed div that's 100% the window height. But mobile safari doesn't detect the correct window height. It always thinks that the URL bar is part of the equation.

This is what I'm using currently but it doesn't account for the URL bar.

$(function(){
    $(document).ready(function(){ // On load
        alert($.browser);   
        $('#right-sidebar').css({'height':(($(window).height()))+'px'});
    });
    $(window).resize(function(){ // On resize
        $('#right-sidebar').css({'height':(($(window).height()))+'px'});
    });
});

Answer 1

Tldr

If you just want to query the window height, cross-browser, and be done with it, use jQuery.documentSize and call $.windowHeight(). For implementing your own solution, read on.

When to use jQuery or the clientHeight of the document

jQuery's $(window).height() is a wrapper for document.documentElement.clientHeight. It gives you the height of the viewport, excluding the space covered by browser scroll bars. Generally, it works fine and enjoys near-universal browser support. But there are quirks on mobile, and in iOS in particular.

• In iOS, the return value pretends that the URL and tab bars are visible, even if they are not. They get hidden as soon as the user scrolls and the browser switches to minimal UI. Window height is increased by roughly 60px in the process, and that is not reflected in the clientHeight (or in jQuery).

• The clientHeight returns the size of the layout viewport, not the visual viewport, and therefore does not reflect the zoom state.

So... not quite so great on mobile.

When to use window.innerHeight

There is another property you can query: window.innerHeight. It

• returns the window height,
• is based on the visual viewport, ie reflects the zoom state,
• is updated when the browser enters minimal UI (mobile Safari),
• but it includes the area covered by scroll bars.

The last point means that you can't just drop it in as a replacement. Also, it is not supported in IE8, and broken in Firefox prior to FF25 (October 2013).

But it can be used as a replacement on mobile because mobile browsers present scroll bars as a temporary overlay which does not consume space in the viewport - window.innerHeight and d.dE.clientHeight return the same value in that regard.

Cross-browser solution

So a cross-browser solution, for finding out the real window height, works like this (pseudo code):

IF the size of browser scroll bars is 0 (overlay)
  RETURN window.innerHeight
ELSE
  RETURN document.documentElement.clientHeight

The catch here is how to determine the size (width) of the scroll bars for a given browser. You need to run a test for it. It's not particularly difficult - have a look at my implementation here or the original one by Ben Alman if you wish.

If you don't want to roll your own, you can also use a component of mine - jQuery.documentSize - and be done with a $.windowHeight() call.

Answer 2

This is due to a bug in jQuery's .height() method.

To get the correct height you can use:

$('#right-sidebar').height(window.innerHeight);

To make sure you are mostly cross browser compatible you can do this:

var height = window.innerHeight ? window.innerHeight : $(window).height();
$('#right-sidebar').height(height);

I say mostly as this will start to behave funny if there is a bottom scroll bar.

Answer 3

Here's how I figured it out. Its a two step process.

Step 1 - Check to see if the device is an iPhone or an iPod.

Step 2 - If it is then check to see if the browser is safari

// On document ready set the div height to window
$(document).ready(function(){ 

    // Assign a variable for the application being used
    var nVer = navigator.appVersion;
    // Assign a variable for the device being used
    var nAgt = navigator.userAgent;
    var nameOffset,verOffset,ix;


    // First check to see if the platform is an iPhone or iPod
    if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
        // In Safari, the true version is after "Safari" 
        if ((verOffset=nAgt.indexOf('Safari'))!=-1) {
          // Set a variable to use later
          var mobileSafari = 'Safari';
        }
    }

    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('#right-sidebar').css('height',(($(window).height()) + 60)+'px');
    } else {
        // Else use the default window height
        $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'});  
    };


});

// On window resize run through the sizing again
$(window).resize(function(){
    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('#right-sidebar').css('height',(($(window).height()) + 60)+'px');
    } else {
        // Else use the default window height
        $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'});  
    };
});

Then use the mobileSafari variable whenever needed to execute mobile safari specific code.

Starting with the device first rules out iPads and desktops etc which can also run Safari. Then the second step rules out Chrome and other browsers which can potentially run on these devices.

Here's a more in depth breakdown of why I did it this way - http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution