Maison  >  Article  >  interface Web  >  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

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

Patricia Arquette
Patricia Arquetteoriginal
2024-10-26 04:10:27793parcourir

Here are a few question-based article titles that encapsulate the content:

Direct and Informative:

* Why is window.innerHeight Different from window.outerHeight in iOS 7 iPad Landscape Mode?
* How to Fix the 20px Discrepancy with Window Heights in iOS 7

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn