The Toolbox

Test de compatibilité mobile gratuit

Vérifiez si votre site est optimisé pour les appareils mobiles. Gratuit, rapide et fonctionne entièrement dans votre navigateur, sans inscription.

Mis à jour le

Share:
Home/Website Tools/Mobile Friendly Test

Mobile Friendly Test

Check if your website is optimized for mobile devices.

Mobile Friendly Test

Demo Mode: Results are simulated for educational purposes. For real mobile-friendly testing, use Google's PageSpeed Insights API.

Mobile-First Best Practices

  • Use responsive design with flexible layouts and CSS Grid/Flexbox
  • Set viewport meta tag: width=device-width, initial-scale=1
  • Use minimum 16px font size for body text
  • Make tap targets at least 48x48 pixels with 8px spacing
  • Avoid horizontal scrolling - use max-width: 100% on media
  • Optimize images with responsive srcset and lazy loading
  • Test with Google's Lighthouse and real devices

Questions Fréquentes

Qu'est-ce que le Test de compatibilité mobile ?

Le Test de compatibilité mobile est un outil en ligne gratuit qui vérifie si votre site web est optimisé pour les appareils mobiles et fournit des recommandations de design responsive.

Le Test de compatibilité mobile est-il gratuit ?

Oui, il est entièrement gratuit et ne nécessite aucune inscription.

Pourquoi la compatibilité mobile est-elle importante ?

Google utilise l'indexation mobile-first, ce qui signifie que la compatibilité mobile a un impact direct sur le classement dans les résultats de recherche. Le Test de compatibilité mobile vous aide à garantir que votre site fonctionne bien sur tous les appareils.

Mes données sont-elles en sécurité avec cet outil ?

Absolument. Le Test de compatibilité mobile traite tout côté client, dans votre navigateur. Aucune donnée n'est envoyée ni stockée sur un serveur. Votre contenu reste privé sur votre appareil à tout moment.

Dois-je créer un compte pour utiliser cet outil ?

Aucun compte ni inscription n'est nécessaire. Ouvrez simplement le Test de compatibilité mobile dans votre navigateur et commencez à l'utiliser immédiatement. Il n'y a ni barrière d'inscription ni restriction d'utilisation.

Comment utiliser le Test de compatibilité mobile ?

Saisissez simplement votre élément dans le champ prévu, ajustez les paramètres selon vos préférences et l'outil le traitera instantanément. Vous pouvez ensuite copier le résultat dans le presse-papiers ou le télécharger.

Quels navigateurs sont pris en charge ?

Le Test de compatibilité mobile fonctionne dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et Opera. Pour une expérience optimale, utilisez la dernière version de votre navigateur préféré.

Qu'est-ce que la balise meta viewport et pourquoi le test la vérifie-t-il ?

La balise meta viewport indique aux navigateurs mobiles comment dimensionner et adapter une page à l'écran de l'appareil. Sans elle, les téléphones supposent une largeur de bureau d'environ 980px et réduisent toute la mise en page pour qu'elle rentre, rendant le texte minuscule et obligeant les utilisateurs à zoomer avec les doigts. La balise correcte est <meta name="viewport" content="width=device-width, initial-scale=1">, placée dans le <head> de la page. « width=device-width » adapte la mise en page à la largeur réelle de l'appareil, et « initial-scale=1 » définit un niveau de zoom de 1:1 au chargement. C'est le signal le plus important pour l'ergonomie mobile, ce qui explique pourquoi une balise viewport absente ou mal configurée est l'une des premières vérifications effectuées par ce test. Collez votre URL ci-dessus pour voir si la vérification du viewport est réussie et consulter la balise exacte à utiliser.

Quelle doit être la taille des zones cliquables pour une page mobile-friendly ?

Les zones cliquables sont les boutons, liens et champs de formulaire que l'utilisateur touche du bout du doigt, ce qui est bien moins précis qu'un curseur de souris. La règle de référence appliquée par ce test est d'environ 48x48 pixels par zone, avec au moins 8 pixels d'espacement entre les éléments adjacents. Des zones plus petites, ou trop rapprochées, entraînent des erreurs de clic où l'utilisateur touche le mauvais lien ou doit zoomer pour viser correctement. Les coupables habituels sont les menus de navigation trop compacts, les petits liens texte à l'intérieur des paragraphes et les boutons icônes dimensionnés pour un pointeur de bureau. La solution consiste à donner aux éléments interactifs un espacement et des marges généreux plutôt que de se fier uniquement au graphisme visible. Entrez votre URL ci-dessus et la vérification des zones cliquables signalera les éléments en dessous du seuil de 48px, afin que vous sachiez exactement quoi agrandir.

Quelle taille de police est considérée comme lisible sur mobile, et pourquoi un texte trop petit fait-il échouer le test ?

Le texte de corps doit faire au moins 16 pixels sur mobile, seuil en dessous duquel la plupart des lecteurs doivent zoomer avec les doigts pour lire confortablement. En dessous de ce seuil, chaque visite exige une interaction supplémentaire et cela révèle une mise en page conçue pour le bureau et jamais adaptée aux téléphones. Le test signale comme échec de lisibilité tout texte de corps inférieur à environ 16px. La correction recommandée consiste à fixer une taille de police de base de 16px et à utiliser des unités relatives comme rem ou em, afin que le texte s'adapte de façon prévisible aux réglages de l'utilisateur et aux différents points de rupture, plutôt que de figer les tailles en pixels fixes. Les titres et légendes peuvent varier, mais c'est le texte de lecture principal que cette vérification évalue. Passez votre URL dans le test ci-dessus pour connaître la taille de texte minimale détectée et savoir si votre page franchit le seuil de lisibilité.

Pourquoi un contenu qui déborde du viewport provoque-t-il un défilement horizontal sur mobile ?

Un défilement horizontal sur mobile signifie presque toujours qu'un élément est plus large que l'écran et que la page ne peut pas se réduire pour le contenir. Les causes habituelles sont des largeurs fixes en pixels dans le CSS, de grandes images non contraintes, des tableaux larges ou des éléments positionnés en absolu qui dépassent le bord droit. Comme un écran de téléphone est étroit, un seul élément surdimensionné suffit à décaler toute la mise en page horizontalement et à casser le confort de lecture. Le test vérifie que tout le contenu tient dans le viewport sans nécessiter de défilement horizontal. Les corrections standards sont des mises en page responsives construites avec CSS Grid ou Flexbox plutôt que des largeurs fixes, et des médias fluides avec max-width: 100% pour que les images ne débordent jamais de leur conteneur. Entrez votre URL ci-dessus pour voir si la vérification de la largeur du contenu est réussie et quels types de débordement le rapport signale.

Quels Core Web Vitals influencent le plus un score de compatibilité mobile ?

L'ergonomie mobile concerne la mise en page, mais la performance façonne l'expérience réelle. C'est pourquoi ce test affiche un score de performance ainsi que trois Core Web Vitals particulièrement déterminants sur téléphone : First Contentful Paint, Largest Contentful Paint et Cumulative Layout Shift. Le FCP marque le moment où le premier contenu apparaît, le LCP mesure la fin du chargement du contenu principal, et le CLS capture l'ampleur des décalages inattendus de la mise en page pendant le chargement des éléments, ce qui est particulièrement gênant sur un petit écran en plein tapotement. Sur mobile, des réseaux plus lents et des processeurs moins puissants rendent ces métriques plus difficiles à atteindre que sur ordinateur. Les corrections concrètes incluent la diffusion d'images responsives avec srcset, le chargement différé de tout ce qui se trouve sous la ligne de flottaison, et la réservation d'espace pour les médias afin que rien ne saute. Lancez votre URL ci-dessus pour voir le score de performance simulé et les valeurs FCP, LCP et CLS détaillées dans le rapport.

Outils Associés

Test de vitesse de site web gratuit

Analysez le temps de chargement des pages, les indicateurs de performance et les pistes d'optimisation de votre site web. Gratuit, rapide et fonctionne entièrement dans votre navigateur, sans inscription.

Extracteur de balises meta gratuit

Extrayez et examinez toutes les balises meta de n'importe quelle page web pour l'analyse SEO et réseaux sociaux. Gratuit, rapide et entièrement dans votre navigateur, sans inscription.

Outil de capture d'écran de site web gratuit

Capturez des captures d'écran pleine page ou de la fenêtre de n'importe quelle page web pour la revue de design et les tests. Gratuit, rapide et entièrement dans votre navigateur, sans inscription.

Vérificateur d'accessibilité gratuit

Vérifiez la conformité d'accessibilité de votre site web aux normes WCAG et obtenez des suggestions de correction concrètes. Gratuit, rapide et entièrement dans votre navigateur, sans inscription.

Voir tous les Outils pour sites web →

À propos du Test de compatibilité mobile

Le Test de compatibilité mobile est un outil gratuit qui passe en revue les critères utilisés par Google pour juger si une page fonctionne bien sur smartphone et tablette. Il suffit d'entrer une URL et de lancer le test pour obtenir un score d'ergonomie mobile sur 100, accompagné d'une analyse détaillée couvrant la balise meta viewport, la lisibilité du texte, la taille des zones cliquables, la largeur du contenu et les principales métriques de performance mobile. Il s'adresse aux développeurs, propriétaires de sites et professionnels du SEO qui veulent un rappel rapide et accessible de ce que « mobile-friendly » signifie réellement, avant de mettre en ligne une mise en page ou de résoudre un problème de classement.

Autant le dire d'emblée : cet outil fonctionne en mode démonstration. Les résultats affichés sont simulés à des fins pédagogiques plutôt qu'issus d'une exploration en direct de votre page, et une mention dans l'outil le précise clairement. Pour un audit réel d'une URL donnée, PageSpeed Insights et Lighthouse de Google s'appuient sur des données de terrain et de laboratoire en direct. L'intérêt de ce test réside ailleurs : il enseigne la checklist elle-même — ce qu'est chaque signal, pourquoi il compte et comment le corriger — afin que vous sachiez précisément quoi vérifier le jour où vous lancerez un audit en conditions réelles.

Ce que le test vérifie

Chaque analyse produit un résultat réussi ou échoué pour chacun des signaux qui déterminent l'ergonomie mobile, avec une courte explication et une correction concrète pour tout ce qui échoue :

  • Configuration du viewport — vérifie la présence d'une balise meta width=device-width, initial-scale=1, pour que les navigateurs mobiles affichent la page à la largeur réelle de l'appareil au lieu d'une mise en page desktop dézoomée.
  • Lisibilité du texte — signale un texte de corps inférieur à environ 16 px, seuil en dessous duquel la plupart des lecteurs doivent zoomer avec les doigts pour lire confortablement.
  • Taille des zones cliquables — vérifie que les boutons et liens sont assez grands et suffisamment espacés pour être touchés avec précision. La règle de référence est d'environ 48x48 pixels avec au moins 8 px d'espacement.
  • Largeur du contenu — recherche les éléments qui débordent du viewport et provoquent un défilement horizontal, signe classique d'un CSS à largeur fixe ou d'images non contraintes.
  • Performance mobile — affiche un score de performance ainsi que les Core Web Vitals les plus déterminants sur téléphone : First Contentful Paint, Largest Contentful Paint et Cumulative Layout Shift.

Pourquoi la compatibilité mobile compte pour le classement

Google utilise l'indexation mobile-first depuis des années, ce qui signifie qu'il explore et classe principalement la version mobile de votre page plutôt que la version desktop. Si votre site s'affiche mal sur téléphone — texte trop petit, boutons trop rapprochés, contenu qui dépasse de l'écran — c'est cette expérience que Google évalue, et c'est aussi celle que vivent la majorité de vos visiteurs. Plus de la moitié du trafic web mondial provient désormais des appareils mobiles, si bien qu'une page qui ne s'affiche correctement que sur ordinateur déçoit la majorité de son audience. Le test aborde ces problèmes exactement comme le ferait un moteur de recherche, si bien que les points corrigés ici sont ceux qui protègent à la fois votre classement et votre taux de rebond.

Transformer les résultats en corrections

La valeur du rapport réside dans les conseils « comment corriger » associés à chaque vérification échouée, qui reprennent les bonnes pratiques mobile-first recommandées par l'outil :

  • Construisez des mises en page responsives avec CSS Grid ou Flexbox plutôt que des largeurs fixes en pixels.
  • Ajoutez la balise meta viewport dans le <head> de la page si elle est absente.
  • Fixez une taille de police de base d'au moins 16 px et utilisez des unités relatives comme rem ou em.
  • Gardez les médias fluides avec max-width: 100% pour que les images ne déclenchent jamais de défilement horizontal.
  • Servez des images responsives avec srcset et activez le chargement différé pour tout ce qui se trouve sous la ligne de flottaison, afin de préserver vos scores de performance.

Considérez cet outil comme une checklist pédagogique et un contrôle préalable : utilisez-le pour comprendre chaque signal et vous entraîner aux corrections, puis confirmez les chiffres réels de votre URL avec Lighthouse ou PageSpeed Insights avant de considérer le travail terminé.