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 für 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 man die Körperpositionierung auf „Fest“ setzt, kann das Problem umgangen werden:

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

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

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

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.