Rudra Analyzer

Test de compatibilité mobile gratuit

Ouvrez votre page dans un vrai navigateur aux tailles ordinateur, tablette et téléphone, voyez une capture d'écran de chacune, et découvrez si elle est adaptée aux écrans mobiles ou si elle déborde et oblige les visiteurs à faire défiler horizontalement.

Saisissez une page, par exemple https://yourwebsite.com ou https://yourwebsite.com/pricing.

Ce que vérifie cet outil

  • Balise viewport

    Si la page possède une balise meta viewport. Sans elle, les téléphones affichent une version ordinateur dézoomée avec un texte minuscule.

  • Contenu plus large que l'écran

    Si la page est plus large que l'écran à chaque taille, ce qui provoque un défilement horizontal et du contenu coupé.

  • Trois tailles d'écran

    Ordinateur (1280×800), tablette (768×1024) et téléphone (390×844), les vues tablette et téléphone émulant un navigateur mobile.

  • Captures d'écran

    Une capture du premier écran à chaque taille, pour voir ce que voient vos visiteurs.

  • Problèmes de chargement

    Si le chargement de la page a échoué ou expiré à l'une des tailles.

Comment fonctionne la vérification

Nous chargeons votre page trois fois dans Chromium — une fois par taille d'écran —, attendons la fin du chargement, puis mesurons si la page est plus large que l'écran et prenons une capture. Les vues tablette et téléphone utilisent l'émulation mobile avec un écran haute densité.

Le score part de 100 : une balise viewport manquante coûte 20 points, chaque taille d'écran avec débordement horizontal 15 points, et les problèmes de chargement 10 points.

Cette vérification rapide ne mesure pas la taille des zones tactiles, la taille du texte ni les éléments qui se chevauchent. Les utilisateurs connectés peuvent lancer un test de mise en page plus approfondi sur jusqu'à huit profils d'appareils, qui recherche aussi ces problèmes.

Problèmes fréquents que nous détectons

  • Pas de balise viewport

    Fréquent sur les anciens sites et les pages codées à la main ; la vue téléphone ressemble à une page d'ordinateur rétrécie.

  • Éléments à largeur fixe

    Des conteneurs, tableaux ou contenus intégrés dont la largeur fixe en pixels dépasse celle d'un écran de téléphone.

  • Images et vidéos qui ne se réduisent pas

    Des médias sans max-width: 100%, qui élargissent la page au-delà de l'écran.

  • Tableaux trop larges

    Des tableaux de prix ou de comparaison avec de nombreuses colonnes.

  • Texte long sans coupure

    De longues URL, adresses e-mail ou lignes de code qui ne peuvent pas passer à la ligne.

Comment les corriger

  1. Ajoutez la balise viewport

    Placez <meta name="viewport" content="width=device-width, initial-scale=1"> dans l'en-tête de la page. La plupart des thèmes modernes l'incluent déjà.

  2. Utilisez des largeurs flexibles

    Remplacez les largeurs fixes en pixels par max-width et des pourcentages, et utilisez CSS grid ou flexbox pour que la mise en page s'adapte aux petits écrans.

  3. Faites en sorte que les médias s'adaptent

    Dans votre CSS, appliquez max-width: 100% et height: auto aux images, vidéos et iframes.

  4. Laissez les tableaux larges défiler dans leur propre cadre

    Placez les tableaux dans un conteneur avec overflow-x: auto, ou empilez les colonnes sur les petits écrans.

  5. Autorisez la coupure des mots longs

    Utilisez overflow-wrap: anywhere sur les zones de texte susceptibles de contenir de longues URL.

Questions fréquentes

Le test est-il effectué sur de vrais téléphones ?

Non. Il utilise un vrai navigateur Chromium réglé aux tailles d'écran de téléphone et de tablette avec émulation mobile. Cela détecte les problèmes de mise en page de façon fiable, mais ce n'est pas identique à chaque téléphone et navigateur, notamment Safari sur iPhone.

Est-ce la même chose que le test d'optimisation mobile de Google ?

Non. Google a retiré son test d'optimisation mobile autonome en 2023. Notre vérification examine deux des causes les plus fréquentes d'une mauvaise mise en page mobile — une balise viewport manquante et du contenu plus large que l'écran — et vous montre des captures d'écran.

Pourquoi les captures ne montrent-elles que le haut de la page ?

Nous capturons le premier écran à chaque taille, c'est-à-dire ce que voient les visiteurs avant de faire défiler. Le contrôle de débordement, lui, mesure la largeur de toute la page.

Vérifie-t-il la vitesse de mon site sur mobile ?

Non. Utilisez pour cela le test de vitesse : Lighthouse simule par défaut un téléphone milieu de gamme sur une connexion mobile.

Mon score est de 100. Mon site est-il parfait sur mobile ?

Cela signifie que la page possède une balise viewport et que rien ne déborde de l'écran aux trois tailles testées. Les boutons trop petits pour être touchés ou le texte trop petit pour être lu méritent un examen plus attentif, ou le test de mise en page approfondi proposé aux utilisateurs connectés.

Guides utiles

Outils gratuits associés

Vous préférez qu'on corrige pour vous ?

Ces contrôles sont gratuits, tout comme les guides. Si vous préférez qu'une personne effectue les modifications, notre équipe propose une aide payante.

Voir les options d'aide professionnelleComment nous testons et notonsTous les outils gratuits