Pourquoi « overflow-x : hidden » ne fonctionne-t-il pas sur les navigateurs mobiles et comment puis-je y remédier ?

Overflow-x:hidden ne contraint pas le contenu sur les navigateurs mobiles

Lors de l'implémentation de l'attribut de style overflow-x:hidden pour restreindre le contenu au largeur de la fenêtre d'affichage, vous pouvez rencontrer un comportement de débordement inattendu sur les navigateurs mobiles. Voici une description du problème et une solution.

Description du problème :

Malgré le paramètre overflow-x:hidden sur les balises body ou html, les navigateurs mobiles affichent un contenu dépassant la largeur de fenêtre spécifiée, ce qui entraîne un espace sur le côté droit de la page.

Raison :

Il a été observé que les navigateurs mobiles négligent souvent overflow-x:hidden lorsqu'ils sont appliqués aux éléments html et body. Au lieu de cela, ils semblent ignorer ces attributs lors de l'analyse de la balise méta de la fenêtre d'affichage.

Solution :

Pour résoudre ce problème, créez un div wrapper dans la balise body et attribuez-lui le style overflow-x:hidden vers ce wrapper au lieu du corps ou html.

Considérez l'exemple de code suivant :

    <div>
<pre class="brush:php;toolbar:false">#wrapper {
    overflow-x: hidden;
}

Remarque supplémentaire :

Dans certains cas, vous devrez peut-être également ajoutez position : par rapport au div du wrapper pour garantir une mise en page appropriée.

En appliquant overflow-x:hidden au wrapper élément, vous isolez efficacement le contenu de ce div des limitations des navigateurs mobiles sur les éléments html et body. Cela vous permet de limiter le contenu à la largeur de fenêtre souhaitée, éliminant ainsi tout espace indésirable sur le côté droit.