Heim > Artikel > Web-Frontend > 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!