Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save GianlucaGuarini/8352375 to your computer and use it in GitHub Desktop.
Save GianlucaGuarini/8352375 to your computer and use it in GitHub Desktop.
Hack to solve the annoying iPad iOS7 landscape extra height issue on the fullscreen web applications http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue
/*!
*
* Author: Gianluca Guarini
* Contact: gianluca.guarini@gmail.com
* Website: http://www.gianlucaguarini.com/
* Twitter: @gianlucaguarini
*
*
**/
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
var htmlTag = document.getElementsByTagName("html")[0],
onOrientationChange = function() {
if (window.orientation === 90 || window.orientation === -90) {
htmlTag.style.height = window.innerHeight + 'px';
window.scrollTo(0, 0);
} else {
htmlTag.style.height = '100%';
}
};
window.addEventListener('orientationchange', onOrientationChange, false);
// to get the focus out of the keyboard
window.addEventListener('focusout', function(e) {
// it must be async because we must wait the end of the keyboard animation
setTimeout(onOrientationChange, 500, e);
});
// to block the normal scroll behavior
htmlTag.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
onOrientationChange();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment