Pourquoi le mode paysage iPad Safari présente-t-il une différence de hauteur intérieure/extérieure dans iOS 7 ?

Énigme de mise en page paysage Safari sur iPad iOS 7 : surmonter l'anomalie innerHeight/outerHeight

Les utilisateurs d'iOS 7 sont confrontés à une énigme inhabituelle avec les applications Web sur le iPad en mode paysage de Safari. Le window.innerHeight (672px) diffère de window.outerHeight (692px), ce qui entraîne des problèmes de mise en page inattendus, tels que 20px d'espace supplémentaire en bas. Ce problème constitue un défi pour les applications qui utilisent 100 % de hauteur pour leur contenu Web.

Naviguer dans le labyrinthe de mise en page

Pour résoudre ce problème, diverses solutions ont vu le jour. Une approche consiste à positionner absolument l'élément body uniquement dans iOS 7 :

<code class="css">body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}</code>

Cependant, cette approche déplace simplement l'espace supplémentaire vers le haut de la page plutôt que de l'éliminer.

Trouver une base solide : positionnement fixe et détection de l'agent utilisateur largeur pour une mise en page fiable :

Pour déterminer si un utilisateur navigue sur un iPad avec iOS 7, implémentez un script pour détecter l'agent utilisateur :

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

En employant ces techniques , les applications Web peuvent neutraliser efficacement l'écart innerHeight/outerHeight dans iOS 7 iPad Safari et offrir une expérience de navigation cohérente et raffinée en orientation portrait et paysage.

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!