iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue

Question

We\'re seeing issues with a web app that has a height of 100% on Safari in iOS 7. It appears that the window.innerHeight (672px) doesn\'t match window.outerHeight (692px), b

Answer 1

Basically there are two bugs - the hight of the window in landscape mode and the scroll position when the user rewerts to it from portrait mode. We have solved it this way:

the hight of the window is controlled by:

// window.innerHeight is not supported by IE
var winH = window.innerHeight ? window.innerHeight : $(window).height();

// set the hight of you app
$('#yourAppID').css('height', winH);

// scroll to top
window.scrollTo(0,0);

now, the above can be put into a function and bind to window resize and/or orientation change events. that's it... see example:

http://www.ajax-zoom.com/examples/example22.php