Ce que c'est
Le CSS (le code de style qui contrôle l'apparence d'une page) peut dimensionner les éléments avec des unités fixes, comme les pixels (une boîte réglée à exactement 800 pixels de large, par exemple), ou des unités relatives et flexibles, comme les pourcentages, qui s'ajustent automatiquement à l'écran sur lequel la page est consultée. Un "élément à largeur fixe" est toute partie d'une page — une image, un tableau, une boîte conteneur — dimensionnée avec une de ces valeurs fixes en pixels plutôt qu'avec une valeur flexible.
Cela fonctionne bien tant que l'écran est plus large que cette valeur fixe, mais dès que l'écran réel (un téléphone, en particulier) est plus étroit que la largeur fixe de l'élément, le navigateur n'a d'autre choix que de laisser la page défiler horizontalement pour s'y adapter, puisqu'il ne peut pas rétrécir un élément en dessous de la taille explicitement fixée.
Pourquoi c'est important
Le défilement horizontal est l'un des signes les plus déroutants et les plus flagrants d'une mise en page mobile cassée, car il oblige un visiteur à défiler dans deux directions à la fois juste pour lire normalement — un schéma de navigation totalement différent et plus frustrant que le défilement de haut en bas qu'attend tout visiteur mobile. Il suffit généralement d'un seul élément surdimensionné n'importe où sur la page (une image large, un tableau intégré, une boîte à largeur fixe) pour forcer ce comportement sur toute la page, pas seulement autour de cet élément précis.
C'est souvent un reliquat de contenu conçu d'abord pour un usage bureau — un tableau copié depuis un tableur, ou une image insérée dans ses dimensions d'origine non compressées — plutôt qu'un défaut fondamental dans la conception globale du site.
Comment le corriger
- Ouvre ton site sur un téléphone (ou une fenêtre de navigateur étroite) et vérifie si toute la page défile horizontalement, ou trouve la section précise où cela commence.
- Repère l'élément précis à l'origine du débordement — souvent une image large, un tableau intégré, ou une boîte avec une largeur en pixels explicitement fixée dans son style.
- Remplace les largeurs fixes en pixels par des unités relatives comme les pourcentages, ou ajoute une règle
max-width: 100%pour que l'élément ne puisse jamais dépasser la largeur réelle de l'écran. - Pour les tableaux larges en particulier, envisage de les envelopper dans un conteneur défilant limité à ce seul tableau, plutôt que de laisser toute la page défiler horizontalement.
- Revérifie sur un téléphone après chaque modification pour confirmer que le défilement horizontal a disparu.