Comment réparer les éléments de navigation fixes dans Mobile Safari lorsque le clavier apparaît ?

Correction des éléments de navigation fixes dans Mobile Safari

S'assurer que les éléments de navigation fixes restent en place lorsque le clavier virtuel s'ouvre dans Mobile Safari peut être un défi. Ce problème provient de bugs connus dans la gestion des éléments fixes par Mobile Safari.

Une solution proposée par dansajin consiste à basculer la position des éléments fixes lorsqu'un champ de saisie reçoit le focus. Lorsque le focus est défini, les éléments fixes sont définis sur position:absolute, et lorsque le focus est perdu, ils reviennent à position:fixed.

Pour implémenter cette approche, ajoutez le CSS suivant :

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

De plus, incluez le JavaScript suivant :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!