# Mon site s’affiche mal sur mobile

> La majorité des visites d’une boutique se fait aujourd’hui sur téléphone, et c’est là que les défauts d’affichage coûtent le plus cher. Bonne nouvelle : les causes sont peu nombreuses, elles se reconnaissent à l’œil, et la plupart se corrigent dans la feuille de style sans toucher au reste du site.

- Source canonique : [https://allaux.fr/problemes/affichage-mobile-casse](https://allaux.fr/problemes/affichage-mobile-casse)
- Langue : FR
- Dernière mise à jour : 2026-08-03

## Réponse directe

> Vérifiez d’abord la balise meta viewport dans le gabarit d’en-tête : themes/votre-theme/templates/_partials/head.tpl sur PrestaShop, header.php du thème sur WordPress. Sans width=device-width, tout le reste est faussé. Pour un débordement horizontal, passez les outils de développement en affichage mobile et repérez l’élément plus large que l’écran, presque toujours un tableau ou une largeur fixe en pixels.

## Quatre défauts, quatre causes

- La page se décale horizontalement et on peut la faire glisser sur le côté : un élément est plus large que l’écran, presque toujours un tableau, une image ou un bloc avec une largeur fixe en pixels.
- Le texte est minuscule et il faut zoomer : la balise de zone d’affichage est absente ou mal réglée dans le gabarit.
- Les boutons se touchent et on clique à côté : les zones tactiles sont trop petites, un défaut d’espacement plus que de mise en page.
- Le menu ne s’ouvre pas, ou s’ouvre et ne se ferme plus : c’est un problème de script, pas de style.

## Le débordement horizontal, défaut numéro un

Un seul élément trop large suffit à décaler toute la page, et il est souvent invisible : une image de bannière importée à sa taille d’origine, un tableau de caractéristiques produit hérité d’une fiche copiée depuis un traitement de texte, une vidéo intégrée avec une largeur fixe, ou un bloc promotionnel ajouté par un module.

La méthode pour le trouver est simple et ne demande aucun outil payant : ouvrir la page sur un ordinateur, réduire la largeur de la fenêtre jusqu’à la taille d’un téléphone, et regarder à quel moment la barre de défilement horizontale apparaît. L’élément fautif est celui qui dépasse à ce moment précis. Sur une boutique, il s’agit neuf fois sur dix d’un contenu saisi en administration, pas du thème.

## Mobile lent et mobile mal affiché sont deux sujets

On les confond souvent parce qu’ils se manifestent ensemble. Une image de deux mégaoctets affichée dans un cadre de trois cents pixels de large ne casse pas la mise en page, mais elle rend la page pénible sur une connexion mobile, et elle décale le contenu pendant le chargement — ce que les mesures d’expérience de page sanctionnent.

Un défaut de mise en page se corrige dans la feuille de style : c’est un travail borné, mesurable en heures.

Un défaut de performance mobile demande de retravailler les images, les scripts tiers et l’ordre de chargement : c’est un chantier distinct.

Un défaut d’ergonomie tactile relève de choix de conception, pas de correction technique.

## Vérifiez d’abord sur un vrai téléphone

> Le mode mobile d’un navigateur de bureau simule les dimensions, pas le comportement tactile ni le rendu réel des polices. Un défaut qui n’apparaît que sur un modèle précis vient souvent du navigateur intégré à une application, pas du site.

## Continuer sur la bonne page

- **Bugs CSS et responsive après changement de thème** — Si les défauts sont apparus avec un nouveau thème PrestaShop. ([/prestashop/problemes/bugs-css-responsive-apres-theme](/prestashop/problemes/bugs-css-responsive-apres-theme))
- **Constructeur de pages qui casse la mise en page** — Le cas fréquent côté WordPress, quand la mise en page vient d’un éditeur visuel. ([/wordpress-woocommerce/problemes/constructeur-pages-casse-mise-en-page](/wordpress-woocommerce/problemes/constructeur-pages-casse-mise-en-page))
- **Optimiser les images produits** — Si le problème est le poids des visuels plus que leur cadrage. ([/guides/optimiser-images-produits](/guides/optimiser-images-produits))
- **Les Core Web Vitals** — Ce que mesurent réellement les indicateurs d’expérience de page sur mobile. ([/glossaire/core-web-vitals](/glossaire/core-web-vitals))

## FAQ

### Mon thème est annoncé comme responsive, pourquoi l’affichage est-il cassé ?

Parce qu’un thème responsive gère ses propres blocs, pas le contenu que vous saisissez. Un tableau collé depuis un traitement de texte ou une image en pleine résolution dans une description casse n’importe quel thème.

### Faut-il un site séparé pour mobile ?

Non, et c’est même contre-productif : deux sites à maintenir, deux fois plus de risques d’écart, et des complications de référencement. Une seule mise en page qui s’adapte reste la bonne approche.

### Le problème peut-il venir d’un module ?

Oui, très souvent. Les modules d’avis, de bandeau promotionnel ou de chat injectent leur propre style et leurs propres scripts, parfois sans aucune adaptation mobile.

### Comment savoir si mes visiteurs mobiles abandonnent à cause de ça ?

En comparant le taux de passage à l’étape suivante entre mobile et ordinateur, étape par étape dans le tunnel. Un écart net à un point précis désigne l’écran à corriger en priorité.

### Est-ce que corriger l’affichage mobile améliore le référencement ?

L’ergonomie mobile et la stabilité de l’affichage font partie des signaux pris en compte. Je ne promets pas de gain chiffré : je constate que les corrections d’affichage ont surtout un effet mesurable sur le taux de mise au panier.