Mon site s'affiche différemment sur téléphone et sur ordinateur — qu'est-ce qui cloche ?

Vous ouvrez votre site sur l'ordinateur et tout est bien à sa place. Puis vous l'ouvrez sur le téléphone et soudain le texte déborde de l'écran, les images sont coupées, les boutons se chevauchent et le menu a disparu. La première réaction est naturelle : « Mon site est cassé ? » ou « C'est mon téléphone ? »

Bonne nouvelle : dans la plupart des cas ce n'est ni votre téléphone ni une panne grave. C'est un problème de design responsive — la manière dont votre site s'adapte aux différentes largeurs d'écran. Un ordinateur fait environ 1400px de large, un téléphone environ 380px. Si le site n'a pas été conçu pour se réorganiser sur les petites largeurs, il casse. Dans cet article, j'explique ce qui se passe, les vraies causes et comment on répare — pour que vous puissiez en parler en connaissance de cause avec celui qui a fait votre site.

Pourquoi un site s'affiche différemment sur téléphone (en bref)

Un site n'est pas une « image » figée unique. Le navigateur reçoit le code et l'organise selon l'espace disponible. Sur un écran large, il a la place de mettre les éléments côte à côte ; sur un écran étroit, il devrait les empiler les uns sous les autres.

C'est ce qu'on appelle le design responsive : même contenu, disposition différente selon la largeur. Bien fait, sur téléphone le menu devient un bouton « hamburger », les colonnes s'empilent à la verticale et le texte reste lisible sans zoomer.

Mal fait, le navigateur tente de tasser la mise en page ordinateur dans un petit écran. D'où exactement vos symptômes : texte qui déborde, images coupées, éléments qui se chevauchent. Ce n'est pas un bug aléatoire — c'est l'absence d'une règle qui dit au site « sur petit écran, réorganise-toi autrement ».

Les 5 causes les plus fréquentes d'une mise en page cassée sur mobile

En pratique, presque tous les problèmes mobiles viennent de quelques causes claires :

• Largeurs fixes en pixels : un élément réglé à « 1000px de large » ne tient pas sur un écran de 380px et pousse la page sur le côté, créant ce défilement horizontal agaçant.
• Balise méta « viewport » absente : sans la ligne qui dit au navigateur d'utiliser la vraie largeur du téléphone, le site s'affiche rétréci, comme une page ordinateur vue de loin.
• Images sans limite de largeur : une grande photo ne se réduit pas et déborde de l'écran.
• Texte et boutons trop petits ou trop rapprochés : difficiles à lire, difficiles à toucher au doigt.
• Un thème ou modèle « responsive » seulement sur le papier : beaucoup de modèles tout faits cassent dès que vous ajoutez votre vrai contenu (textes longs, photos d'un autre format).

Si vous reconnaissez le défilement horizontal ou le texte qui « s'échappe », c'est presque sûrement l'une des deux premières.

Comment vérifier vous-même en 2 minutes, sans compétences techniques

Pas besoin d'être programmeur pour diagnostiquer. Faites ceci :

• Ouvrez le site sur votre téléphone et essayez de faire glisser la page à gauche et à droite. Si elle bouge sur le côté et qu'un espace vide apparaît, un élément est plus large que l'écran — la cause classique.
• Vérifiez si vous devez zoomer avec les doigts pour lire. Si oui, la balise viewport manque probablement.
• Sur l'ordinateur, ouvrez le site et rétrécissez la fenêtre du navigateur en tirant son bord jusqu'à la largeur d'un téléphone. Un site responsive se réorganise au fur et à mesure ; un site cassé reste bloqué ou coupe le contenu.

Prenez quelques captures d'écran des problèmes exacts (le menu, un bouton, une section précise). Il sera bien plus facile de montrer à quelqu'un ce qui cloche que de le décrire avec des mots.

Ce que veut dire vraiment corriger le problème (pas seulement le masquer)

Il y a deux sortes de « corrections ». Les mauvaises masquent le symptôme : elles rétrécissent tout jusqu'à ce que ça rentre, ou cachent simplement les éléments qui se comportent mal sur mobile. Résultat ? Un site où rien n'est lisible, ou auquel il manque des parties importantes.

La vraie correction, c'est que la mise en page soit repensée pour le mobile : les colonnes s'empilent à la verticale, le menu devient compact, le texte garde une taille lisible, les boutons sont assez grands pour le doigt et les images s'adaptent au lieu de déborder.

En pratique cela se fait avec des « media queries » — des règles dans le code qui disent « en dessous de 768px, organise-toi ainsi ». Ce n'est pas un travail énorme pour qui sait faire, mais cela exige un site pensé mobile-first, pas rafistolé après coup. Plus de la moitié des visiteurs d'un commerce local viennent d'un téléphone : le mobile n'est donc pas un cas secondaire — c'est le cas principal.

Quand cela vaut la peine de refaire, et comment on travaille chez MPO

Parfois un vieux site peut être corrigé par endroits. D'autres fois le thème est si rigide que chaque correction en casse une autre — et là, sur le long terme, un nouveau site construit correctement dès le départ revient moins cher.

Chez MPO Web Studio, nous construisons tout en mobile-first : nous concevons d'abord pour le téléphone, puis nous étendons vers l'ordinateur — exactement l'inverse de la façon dont la plupart des sites cassent. Nous travaillons à distance dans tout le pays, avec des tarifs transparents et sans promesse du type « garanti n°1 sur Google » (si quelqu'un vous promet cela, méfiez-vous).

Si vous voulez, on vous fait d'abord une démo gratuite — une vraie version de votre site, que vous consultez sur votre propre téléphone avant de payer quoi que ce soit. Écrivez-nous sur WhatsApp avec l'adresse de votre site actuel et on vous dira exactement ce qui cloche et ce que coûterait la réparation.