communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
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 ?

DDD
Libérer： 2024-12-29 01:31:10
original
457 Les gens l'ont consulté

Why Doesn't `overflow-x: hidden` Work on Mobile Browsers, and How Can I Fix It?

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>
Copier après la connexion
#wrapper {
    overflow-x: hidden;
}
Copier après la connexion

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!

source：php.cn
Article précédent：Comment puis-je adapter le contenu d'une iframe à ma page Web ? Article suivant：Comment puis-je rendre un DIV enfant plus large que son parent en CSS ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2354
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2488
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
2105
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1984
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
2055
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal