blogHome

Window Height 100% on Mobile Safari – Coding Solution

January 21st, 2013

I recently started working on a project that required a fixed div that was 100% the height of the browser window. I started with a basic script to assign the height to that of the window.

1
2
3
4
5
6
7
8
9
10
11
12
// Wait until the document is loaded before executing the code
$(document).ready(function(){
 
	// Set the div height to 100% the window 
	$('#targetDiv').css({'height':(($(window).height()))+'px'});
 
	// Set the div height again if someone resizes the window
	$(window).resize(function(){
		// The same code to assign the height to the window height
		$('#targetDiv').css({'height':(($(window).height()))+'px'});
	});	
});

The problem is that in mobile Safari the window changes when you scroll down. The URL bar slides up and out of the screen but the jQuery .resize() function doesn’t update the height as you scroll. This creates a 60px height discrepancy.

I scrounged around the internet for a good solution but couldn’t find one for the life of me. After many attempts I managed to find two pieces of script which when added work correctly.

The first step was to detect whether the user is using an iPhone or iPod. Then if they’re using either of those check to see if the browser type is safari. The reason it needs to be a two step process is that the devices could be using Chrome or other mobile browsers. But if you start with asking for the browser type you’d target desktops too. So narrowing down the device then the browser allows us to use assign for a variable and then check for that variable anytime we need to specifically target mobile safari.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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";
	}
}

Now that we have a variable named mobileSafari I can check to make sure it’s assigned then add 60px to the div’s height.

Here’s the finished code for a 100% height div across multiple browsers including mobile Safari.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 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'});	
	};
});

or thanks to mrsweaters over on Forrst made it a little neater.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function($, window, undefined) {
    // First check to see if the platform is an iPhone or iPod
    if(/iP/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){
        var mobileSafari = "Safari";
    }
 
    // Set the div height
    function setHeight($rightSidebar) {
        var new_height = $(this).height();
        // if mobileSafari add +60px
        if (typeof mobileSafari === 'string'){ new_height += 60 };
        $rightSidebar.css('height', new_height);
    }
 
    setHeight($('#right-sidebar'));
    $(window).resize(function() {
        setHeight.call(this, $('#right-sidebar'));
    });
 
}(jQuery, this));

Leave A Comment