Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann man Navigationsverschiebungen in Mobile Safari mit einer virtuellen Tastatur beheben?

Mary-Kate Olsen
Freigeben: 2024-10-25 22:45:02
Original
965 Leute haben es durchsucht

How to Fix Navigation Displacement in Mobile Safari with Virtual Keyboard?

Behobene Navigationsverschiebung in Mobile Safari mit virtueller Tastatur

Mobile Safari stößt häufig auf Komplikationen mit festen Elementen, insbesondere wenn eine virtuelle Tastatur ein Eingabefeld in der Navigation überlagert. Wie beobachtet, verschiebt sich die Navigation abrupt an eine unerwartete Position und stört ihr beabsichtigtes Verhalten.

Um dieses Problem zu beheben, ziehen Sie die folgenden Lösungen in Betracht:

1. Umschalten von „Fest auf Absolut“

Diese Methode ändert die Position fester Elemente dynamisch auf „absolut“, wenn eine Eingabe den Fokus erhält, und stellt sie bei Verlust des Fokus auf „fest“ zurück.

<code class="CSS">.header { 
    position: fixed; 
} 
.footer { 
    position: fixed; 
} 
.fixfixed .header, 
.fixfixed .footer { 
    position: absolute; 
} </code>
Nach dem Login kopieren
<code class="JavaScript">if ('ontouchstart' in window) {
    /* cache dom references */ 
    var $body = $('body'); 

    /* bind events */
    $(document)
    .on('focus', 'input', function() {
        $body.addClass('fixfixed');
    })
    .on('blur', 'input', function() {
        $body.removeClass('fixfixed');
    });
}</code>
Nach dem Login kopieren

Alternative Lösungen:

Entdecken Sie die Lösungen unter dem folgenden Link. Diese Vorschläge bieten mögliche Lösungen für diesen speziellen mobilen Safari-Fehler.

[Fix Position in Mobile Safari behoben](http://dansajin.com/2012/12/07/fix-position-fixed/)

Das obige ist der detaillierte Inhalt vonWie kann man Navigationsverschiebungen in Mobile Safari mit einer virtuellen Tastatur beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage