Warum gibt es im Querformatmodus von iOS 7 Safari für iPad einen Höhenunterschied von 20 Pixeln?

Diskrepanz im Querformat-Layout von iOS 7 Safari: innerHeight vs. äußereHeight

In iOS 7 Safari für iPad tritt ein besonderes Problem mit Web-Apps auf, die 100 % Höhe nutzen. Die Werte von window.innerHeight (672px) und window.outerHeight (692px) weichen nur im Querformat voneinander ab. Diese Diskrepanz führt zu zusätzlichen 20 Pixeln ungenutztem Platz, was sich auf das Layout von Navigationselementen und absolut positionierten Elementen am unteren Bildschirmrand auswirkt.

Um dieses Problem zu entschärfen, bis Apple es behebt, haben Entwickler auf Problemumgehungen zurückgegriffen. Ein Ansatz bestand darin, den Hauptteil in iOS 7 absolut zu positionieren und die 20-Pixel-Lücke effektiv nach oben statt nach unten auf der Seite zu verschieben. Es hat sich jedoch eine effektivere Lösung herauskristallisiert.

Indem Sie die Körperpositionierung auf „Fest“ setzen, kann das Problem umgangen werden:

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

Um iPad-Geräte mit iOS 7 zu identifizieren, kann das folgende Skript verwendet werden eingesetzt werden:

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

Durch die Implementierung dieser Problemumgehung können Entwickler das ordnungsgemäße Layoutverhalten in iOS 7 Safari für iPad sicherstellen und so die störende Höhendifferenz und deren Auswirkungen auf Navigation und Positionierung beseitigen.

Das obige ist der detaillierte Inhalt vonWarum gibt es im Querformatmodus von iOS 7 Safari für iPad einen Höhenunterschied von 20 Pixeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!