Maison >interface Web >tutoriel CSS >Pourquoi « overflow-x : hidden » ne fonctionne-t-il pas sur les navigateurs mobiles et comment puis-je y remédier ?
Pourquoi « overflow-x : hidden » ne fonctionne-t-il pas sur les navigateurs mobiles et comment puis-je y remédier ?
- DDDoriginal
- 2024-12-29 01:31:10455parcourir
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 :
<body>
<div>
#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.
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!