Pourquoi window.innerHeight est-il différent de window.outerHeight dans le mode paysage Safari d'iOS 7 ?

Bogue de mise en page du paysage Safari sur iPad iOS 7 : disparité InnerHeight/OuterHeight

Dans iOS 7 Safari, les applications Web avec une hauteur de corps de 100 % rencontrez un problème particulier en mode paysage. Le window.innerHeight (672px) diffère du window.outerHeight (692px).

Cette différence entraîne un espace supplémentaire de 20px sous la zone visible, ce qui entraîne le masquage des éléments de navigation derrière le chrome du navigateur lors du balayage vers le haut. . Les éléments positionnés de manière absolue en bas de l'écran apparaissent également à 20 px.

Solution de contournement

Pour atténuer ce bug, vous pouvez appliquer un hack CSS qui définit explicitement la hauteur du corps. à 672px et le positionne absolument uniquement dans iOS 7 :

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

Pour identifier les appareils iPad exécutant iOS 7, utilisez le script suivant :

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

En appliquant cette solution de contournement, la hauteur externe sera être obligé de correspondre à la innerHeight, garantissant ainsi que la mise en page de votre application se comporte comme prévu dans le mode paysage iOS 7 Safari.

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!