Hier sind einige fragenbasierte Artikeltitel, die den Inhalt zusammenfassen: Direkt und informativ: * Warum unterscheidet sich window.innerHeight von window.outerHeight im iOS 7 iPad-Querformat? * Wie t

Diskrepanz im Querformat-Layout von iOS 7 iPad Safari

Bei der Verwendung eines iOS 7 iPad im Querformat tritt ein rätselhaftes Problem mit Web-Apps auf, in denen Fenster angezeigt werden .innerHeight und window.outerHeight stimmen nicht überein. Dieser Unterschied von 20 Pixel führt dazu, dass Navigationselemente verdeckt werden und die absolute Positionierung am unteren Bildschirmrand falsch ausgerichtet ist.

Um dieses Problem zu beheben und zu verhindern, dass es die Benutzererfahrung beeinträchtigt, kann eine Problemumgehung implementiert werden. Durch die absolute Positionierung des Body-Elements speziell in iOS 7:

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

Bedauerlicherweise verschiebt dieser Ansatz den zusätzlichen Platz einfach an den oberen Rand der Seite, anstatt ihn aufzulösen. Eine alternative Lösung, die sich bewährt hat, ist die Änderung der Positionierung auf „Fest“:

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

Zusätzlich kann ein Skript verwendet werden, um iPad-Geräte mit iOS 7 zu erkennen:

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

Das obige ist der detaillierte Inhalt vonHier sind einige fragenbasierte Artikeltitel, die den Inhalt zusammenfassen: Direkt und informativ: * Warum unterscheidet sich window.innerHeight von window.outerHeight im iOS 7 iPad-Querformat? * Wie t. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!