Skip to content

Instantly share code, notes, and snippets.

@paulkoegel
Last active January 29, 2016 18:47
Show Gist options
  • Save paulkoegel/5601290 to your computer and use it in GitHub Desktop.
Save paulkoegel/5601290 to your computer and use it in GitHub Desktop.
Workaround to get the real window.innerHeight on Safari and Chrome on iOS with auto-hiding address bars
# window.innerHeight with auto-hiding address bar
# When calling `window.innerHeight` on DOM.ready in Safari or Chrome
# on iOS (in 2013-05 at elast ;) 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.
$('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()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment