Pourquoi y a-t-il un écart de hauteur de 20 px dans le mode paysage d'iOS 7 Safari pour iPad ?

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é :

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

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

<code class="javascript">if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}</code>

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!