Voici quelques titres d'articles basés sur des questions qui résument le contenu : Direct et informatif : * Pourquoi window.innerHeight est-il différent de window.outerHeight dans le mode paysage de l'iPad iOS 7 ? * Comment

Différence de mise en page paysage Safari sur iPad iOS 7

Lors de l'utilisation d'un iPad iOS 7 en mode paysage, un problème déroutant survient avec les applications Web où la fenêtre .innerHeight et window.outerHeight ne s'alignent pas. Cette différence de 20 px entraîne l'obscurcissement des éléments de navigation et un mauvais alignement du positionnement absolu en bas de l'écran.

Pour résoudre ce problème et éviter qu'il n'interfère avec l'expérience utilisateur, une solution de contournement peut être mise en œuvre. En positionnant absolument l'élément body spécifiquement dans iOS 7 :

body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}

Malheureusement, cette approche déplace simplement l'espace supplémentaire vers le haut de la page au lieu de le résoudre. Une solution alternative qui s'est avérée efficace consiste à modifier le positionnement en fixe :

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

De plus, un script peut être utilisé pour détecter les appareils iPad exécutant iOS 7 :

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

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!