Mobile Guide

iOS

Gotchas

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()