Hier sind einige fragenbasierte Titel, die zu Ihrem Artikel passen: * Warum ist window.innerHeight im iOS 7 iPad Safari-Querformat um 20 Pixel kleiner als window.outerHeight und wie kann ich das Problem beheben? * So lösen Sie das Problem

Inkonsistente Höhenberichte für das iPad Safari im Querformat unter iOS 7: Behebung des Problems

Im Safari-Querformatmodus für das iPad 7 von iOS 7 tritt eine besondere Diskrepanz zwischen den Fenstern auf .innerHeight und window.outerHeight, mit einem Unterschied von 20 Pixel. Dieses Problem betrifft Web-Apps mit 100 % Höhe und führt zu unerwartetem Verhalten.

Um dieses Problem zu beheben, wurde eine Lösung entwickelt, die die Anpassung der Körperpositionierung beinhaltet:

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

Dieser Code behebt das bedingt Position des Körpers, um sicherzustellen, dass seine Höhe mit window.innerHeight übereinstimmt. Darüber hinaus wurde ein Skript verwendet, um iPad-Geräte mit iOS 7 zu erkennen und CSS-Klassen dynamisch zum hinzuzufügen. Element für gezieltes Styling:

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

Durch die Implementierung dieser Änderungen wurde das Problem behoben, sodass Web-Apps ihre Höhe genau berechnen und die 20-Pixel-Diskrepanz im iOS 7 iPad Safari-Querformat vermeiden können.

Das obige ist der detaillierte Inhalt vonHier sind einige fragenbasierte Titel, die zu Ihrem Artikel passen: * Warum ist window.innerHeight im iOS 7 iPad Safari-Querformat um 20 Pixel kleiner als window.outerHeight und wie kann ich das Problem beheben? * So lösen Sie das Problem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!