Différence de disposition du paysage dans iOS 7 Safari : innerHeight par rapport à externalHeight

Dans iOS 7 Safari pour iPad, un problème particulier se pose avec les applications Web qui utiliser 100 % de la hauteur. Les valeurs window.innerHeight (672px) et window.outerHeight (692px) divergent uniquement en mode paysage. Cet écart entraîne 20 px d'espace inutilisé supplémentaire, affectant la disposition des éléments de navigation et les éléments positionnés de manière absolue en bas de l'écran.

Pour atténuer ce problème jusqu'à ce qu'Apple le résolve, les développeurs ont eu recours à des solutions de contournement. Une approche impliquait un positionnement absolu du corps dans iOS 7, déplaçant efficacement l'espace de 20 pixels vers le haut de la page plutôt que vers le bas. Cependant, une solution plus efficace a émergé.

En définissant la position du corps sur fixe, le problème peut être contourné :

@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 672px !important;
    }
}

Pour identifier les appareils iPad exécutant iOS 7, le script suivant peut être utilisé :

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}

En implémentant cette solution de contournement, les développeurs peuvent garantir un comportement de mise en page correct dans iOS 7 Safari pour iPad, éliminant ainsi l'écart de hauteur gênant et son impact sur la navigation et le positionnement.