Warum springt die feste Navigation, wenn die virtuelle Tastatur in Mobile Safari aktiviert wird?

So verhindern Sie, dass die feste Navigation während der Aktivierung der virtuellen Tastatur springt

Feste Navigationselemente können unerwartetes Verhalten zeigen, wenn die virtuelle Tastatur in Mobile Safari angezeigt wird . Dies kann dazu führen, dass die Navigation an eine unerwünschte Position in der Mitte der Seite springt.

Das Problem

Benutzer erleben eine plötzliche Verschiebung der Position des festen Navigationselements, wenn Sie konzentrieren sich auf ein Texteingabefeld in der festen Navigation und die virtuelle Tastatur erscheint. Dies macht sich besonders bemerkbar, wenn das Navigationselement unten auf der Seite positioniert ist.

Die Lösung

Um diesen Fehler zu beheben, sollten Sie den folgenden CSS- und JavaScript-Code verwenden :

CSS:

.header {
    position: fixed;
}

.footer {
    position: fixed;
}

.fixfixed .header,
.fixfixed .footer {
    position: absolute;
}

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');
    });
}

Durch Hinzufügen der fixfixed-Klasse zum Körper when Wenn ein Eingabeelement fokussiert ist und es entfernt wird, wenn die Eingabe unscharf ist, können Sie die festen Elemente auf „position: absolut“ umstellen und sie dann bei Bedarf auf „position: fest“ zurücksetzen. Diese Lösung verhindert effektiv, dass das Navigationselement während der Tastaturaktivierung springt.

Das obige ist der detaillierte Inhalt vonWarum springt die feste Navigation, wenn die virtuelle Tastatur in Mobile Safari aktiviert wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!