Comment résoudre le problème du défilement des pages après que le clavier souple du navigateur de bord mobile apparaisse?

Brefteur de bord mobile Le clavier souple apparaît et provoque des problèmes et des solutions de défilement de la page

Lorsque vous utilisez le navigateur Edge sur votre téléphone mobile, une fois que le clavier souple apparaît dans la zone d'entrée, la page a souvent un problème ennuyeux: la hauteur de la page reste inchangée et peut toujours faire défiler vers le haut et vers le bas, ce qui est incompatible avec l'effet attendu, en particulier lorsque le contenu de la page dépasse l'écran. Cet article analyse ce problème et fournit des solutions.

Brève description du problème: Dans une page HTML simple (y compris une boîte d'entrée), après que le clavier doux apparaisse, la page ne parvient pas à ajuster automatiquement la hauteur pour correspondre à la zone visuelle, mais conserve la hauteur d'origine, ce qui entraîne une barre de défilement et le défilement au-delà du contenu de l'écran, affectant l'expérience utilisateur.

Solution 1: Utilisez des conteneurs pour contrôler le défilement

Ce problème peut être résolu efficacement grâce au style CSS et à l'ajustement de la structure HTML. La méthode est: enveloppez la boîte d'entrée avec un conteneur div et définissez overflow du corps à hidden , et définissez touch-action à none .

Code html:

<div class="frame">
  <input type="text">
</div>

Code CSS:

 corps {
  débordement: caché;
  ACTION TOUCHE: Aucun;
}

overflow: hidden empêche le défilement corporel, touch-action: none interdit davantage le défilement. Le conteneur .frame contient des boîtes d'entrée pour s'assurer que la zone de la boîte d'entrée peut être affichée et interagir normalement.

Solution 2: Ajustez dynamiquement la hauteur de la page

Une solution plus simple consiste à utiliser la taille de la fenêtre du navigateur pour modifier l'événement ( resize ) et ajuster dynamiquement la hauteur de la page. Dans resize , définissez la hauteur de la page sur visualviewport.height afin que la hauteur de la page soit ajustée en fonction des modifications de la zone visuelle. Cela nécessite une implémentation JavaScript.

Cependant, même avec l'approche ci-dessus, dans certains cas spéciaux, comme la zone d'entrée elle-même permet de faire défiler, la traînée de la boîte d'entrée peut toujours faire défiler la page. Cela nécessite une analyse plus approfondie et des solutions plus complexes.

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!