Heim >Web-Frontend >CSS-Tutorial >Wie kann man Navigationsverschiebungen in Mobile Safari mit einer virtuellen Tastatur beheben?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-25 22:45:021025Durchsuche

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>
<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>

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!

Stellungnahme:
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