Warum unterscheidet sich window.innerHeight von window.outerHeight im Safari-Querformatmodus von iOS 7?

iOS 7 iPad Safari Querformat-Layoutfehler: InnerHeight/OuterHeight-Disparität

In iOS 7 Safari werden Webanwendungen mit einer Körperhöhe von 100 % angezeigt Im Querformat tritt ein besonderes Problem auf. Die window.innerHeight (672px) unterscheidet sich von der window.outerHeight (692px).

Diese Diskrepanz führt zu zusätzlichen 20px an Platz unter dem sichtbaren Bereich, was dazu führt, dass Navigationselemente beim Wischen nach oben hinter dem Browser-Chrom verborgen werden . Absolut positionierte Elemente am unteren Bildschirmrand erscheinen ebenfalls 20 Pixel entfernt.

Problemumgehung

Um diesen Fehler zu mildern, können Sie einen CSS-Hack anwenden, der die Körpergröße explizit festlegt auf 672px und positioniert es absolut nur in iOS 7:

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

Um iPad-Geräte mit iOS 7 zu identifizieren, verwenden Sie das folgende Skript:

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

Durch die Anwendung dieser Problemumgehung wird die äußere Höhe angezeigt Sie müssen die Anpassung an innerHeight erzwingen, um sicherzustellen, dass sich das Layout Ihrer App im Safari-Querformatmodus von iOS 7 wie beabsichtigt verhält.

Das obige ist der detaillierte Inhalt vonWarum unterscheidet sich window.innerHeight von window.outerHeight im Safari-Querformatmodus von iOS 7?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!