Un site s’affiche généralement différemment sur mobile pour l’une de trois raisons : la mise en page s’adapte à l’écran plus étroit (c’est normal), le téléphone reçoit une autre version de la page (cache, détection d’appareil ou extensions), ou le navigateur et les réglages du téléphone l’affichent autrement (moteur de Safari, mode sombre, taille de police). Identifiez d’abord dans quel cas vous êtes, car les solutions n’ont rien en commun.
D’abord, reproduisez le problème sur ordinateur
Ouvrez la même URL en vue mobile sur votre ordinateur : le mode appareil des DevTools de Chrome, ou une extension de vue mobile comme Mobile View Extension, qui recharge la page avec un user agent mobile et une taille d’écran de téléphone.
- L’affichage est aussi mauvais en vue mobile ? C’est un problème de mise en page ou de contenu. Commencez par les causes 1 à 4.
- L’affichage est bon en vue mobile mais mauvais sur le téléphone ? C’est un problème de diffusion ou de navigateur. Commencez par les causes 5 à 11.
Causes liées à la mise en page et au contenu
1. La balise meta viewport est absente ou incorrecte
Sans <meta name="viewport" content="width=device-width, initial-scale=1">, les téléphones affichent la page comme une page desktop d’environ 980 px puis la réduisent : tout paraît minuscule. Avec une valeur incorrecte, comme un width=1024 fixe, la page est mise à l’échelle bizarrement. Voir la balise meta viewport expliquée.
2. Un élément est plus large que l’écran
Un seul élément à largeur fixe (un tableau, un contenu intégré, une URL longue, une image sans max-width: 100%) fait défiler toute la page horizontalement, et certains navigateurs dézooment pour le faire tenir. Repérez-le dans les DevTools en cherchant les éléments dont le scrollWidth dépasse la zone d’affichage.
3. Les breakpoints changent la mise en page à une largeur inattendue
En paysage, votre téléphone est peut-être plus large que vous ne le pensez, ou une tablette tombe du côté desktop d’un breakpoint à 768 px. Vérifiez la largeur réelle de l’appareil dans le tableau des tailles d’écran d’iPhone et revoyez vos breakpoints.
4. Du contenu est masqué ou réordonné sur mobile
Les constructeurs de pages et le CSS masquent souvent des sections avec display: none aux petites largeurs, ou réordonnent les colonnes. C’est un choix de design, mais on l’oublie facilement. Vérifiez les réglages de visibilité propres au mobile.
Causes liées à la diffusion : le téléphone reçoit une autre page
5. Le cache sert une ancienne version
Le navigateur du téléphone garde peut-être un ancien CSS, ou votre CDN ou extension de cache conserve un cache mobile séparé qui n’a pas été vidé. Videz le cache du site et celui du CDN, puis rechargez sur le téléphone dans un onglet privé.
6. La détection d’appareil sert un autre modèle
Certains thèmes, extensions et serveurs vérifient le user agent et servent un HTML différent aux téléphones. Une fenêtre de navigateur de bureau, même étroite, ne voit jamais cette version. Une vue mobile qui envoie un vrai user agent mobile, si. Le fonctionnement des user agents est expliqué dans à quoi sert un user agent switcher.
7. Publicités, tests A/B et personnalisation
Les emplacements publicitaires, les expériences et le contenu géolocalisé peuvent varier selon l’appareil ou la visite. Testez sans être connecté, dans un onglet privé, avec les expériences désactivées si votre outil le permet.
Causes liées au navigateur et aux réglages : le téléphone affiche autrement
8. Le moteur de Safari se comporte différemment
Tous les navigateurs sur iPhone utilisent essentiellement WebKit. Les différences apparaissent sur les contrôles de formulaire, position: sticky dans des conteneurs en overflow, 100vh avec la barre d’adresse qui se replie (utilisez 100dvh) et les fonctionnalités CSS récentes. Testez dans Safari iOS via le Simulator de Xcode ou sur un vrai appareil ; voir tester sur iPhone.
9. Le navigateur applique un mode sombre
Certains navigateurs, comme Samsung Internet, peuvent forcer des couleurs sombres sur les pages qui ne déclarent pas leur propre schéma de couleurs. Les logos à fond transparent et les couleurs codées en dur deviennent illisibles. Déclarez color-scheme et proposez un thème sombre avec prefers-color-scheme, ou définissez explicitement des couleurs claires.
10. Les polices et la taille du texte diffèrent
Si une police web ne se charge pas, le téléphone se rabat sur sa police système, dont les largeurs diffèrent : le texte passe à la ligne autrement. Les utilisateurs peuvent aussi agrandir le texte dans les réglages du navigateur ou d’accessibilité du système, et les navigateurs mobiles agrandissent parfois le texte automatiquement en paysage. Utilisez des unités relatives, laissez le texte passer à la ligne et définissez text-size-adjust: 100% si l’agrandissement automatique pose problème.
11. Des fonctions du navigateur modifient la page
Bloqueurs de contenu, modes d’économie de données, modes lecture et traduction peuvent tous changer ce que voit un visiteur. Si une seule personne signale une mise en page étrange, demandez-lui quel navigateur et quelles fonctions elle utilise avant de tout refaire.
Un tableau de diagnostic rapide
| Symptôme | Cause la plus probable |
|---|---|
| Tout est minuscule, il faut zoomer | Balise viewport absente (1) |
| La page défile sur le côté | Élément plus large que l’écran (2) |
| Bon dans l’aperçu, ancien design sur le téléphone | Cache (5) |
| Design complètement différent sur le téléphone | Détection d’appareil ou thème mobile (6) |
| Cassé uniquement sur iPhone | Différence Safari/WebKit (8) |
| Couleurs inversées ou logo invisible | Mode sombre forcé (9) |
| Le texte passe à la ligne autrement, les boutons débordent | Police de secours ou mise à l’échelle du texte (10) |
Éviter que cela se reproduise
Vérifiez les nouvelles pages en vue mobile pendant le développement, pas après la mise en ligne, et gardez une courte checklist de mise en production. La checklist de test de site mobile en contient une. Pour les corrections propres à WordPress, voir comment rendre un site WordPress responsive.
Questions fréquentes
Pourquoi mon site s’affiche-t-il différemment sur mon téléphone et dans la vue mobile de Chrome ?
La vue mobile de Chrome utilise le moteur de Chrome et les fichiers en cache de votre ordinateur. Le téléphone peut utiliser le moteur de Safari, avoir d’autres fichiers en cache ou un cache mobile côté CDN, ou appliquer un mode sombre ou un agrandissement du texte.
Pourquoi mon site WordPress s’affiche-t-il différemment sur mobile ?
Les causes les plus fréquentes sont des réglages de constructeur de pages appliqués uniquement à la taille desktop, une extension de cache qui sert un ancien cache mobile, et des thèmes ou extensions qui servent une mise en page mobile séparée.
Pourquoi mon site est-il dézoomé sur mobile ?
En général, la balise meta viewport est absente, ou un élément est plus large que l’écran et le navigateur dézoome pour le faire tenir.