window.innerHeight with auto-hiding address bar
When you call
window.innerHeight on DOM.ready you’ll get the height of the available screen area between the address bar - which is displayed on page load and then automatically hidden once you start scrolling - and the toolbar.
On my iPhone simulator it’s 356px with the address bar and 416px without.
To get the window’s real height, we first need to trigger a scroll event, which will auto-hide the address bar, and then chain all further calculations of window.innerHeight inside a timeout. Ironically, when loading the page the address bar can still be seen and it’ll only be hidden once you scroll.
# do one pseudo-scroll to ensure we get the real innerHeight on iOS (all calls have to come within _.defer) # on iOS auto-hiding address bars would give us 60px less height on page load $('body').height('2000px') # need a large body to be able to scroll down $(window).scrollTop(80) _.defer -> # defer calls `window.setTimeout` with a timeout of 0 $('body').height('auto') $(window).scrollTop(0) MyApp.start()