Warum weist der Safari-Querformatmodus des iPad in iOS 7 eine Diskrepanz zwischen innerHeight und outerHeight auf?

iOS 7 iPad Safari Landscape Layout-Rätsel: Überwindung der innerHeight/outerHeight-Anomalie

iOS 7-Benutzer stoßen auf ein ungewöhnliches Rätsel mit Web-Apps auf dem iPad im Safari-Querformat. Die window.innerHeight (672px) unterscheidet sich von der window.outerHeight (692px), was zu unerwarteten Layoutproblemen führt, z. B. zu 20px zusätzlichem Platz am unteren Rand. Dieses Problem stellt eine Herausforderung für Apps dar, die 100 % Höhe für ihre Webinhalte nutzen.

Navigation durch das Layout-Labyrinth

Um dieses Problem anzugehen, wurden verschiedene Lösungen entwickelt. Ein Ansatz besteht darin, das Body-Element nur in iOS 7 absolut zu positionieren:

<code class="css">body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}</code>

Dieser Ansatz verschiebt jedoch lediglich den zusätzlichen Platz an den oberen Rand der Seite, anstatt ihn zu entfernen.

Festen Stand finden: Feste Positionierung und Erkennung von Benutzeragenten

Eine robustere Lösung besteht darin, eine Medienabfrage zu verwenden, um nur während iPad iOS 7-Sitzungen eine feste Positionierung auf das Körperelement anzuwenden und eine 100 %ige Sicherheit zu gewährleisten. Breite für zuverlässiges Layout:

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

Um festzustellen, ob ein Benutzer auf einem iPad mit iOS 7 surft, implementieren Sie ein Skript zur Erkennung des Benutzeragenten:

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

Durch den Einsatz dieser Techniken , Web-Apps können die Diskrepanz zwischen innerHeight und outerHeight in iOS 7 iPad Safari effektiv neutralisieren und ein konsistentes und ausgefeiltes Surferlebnis sowohl im Hoch- als auch im Querformat bieten.

Das obige ist der detaillierte Inhalt vonWarum weist der Safari-Querformatmodus des iPad in iOS 7 eine Diskrepanz zwischen innerHeight und outerHeight auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!