Testeur de compatibilité mobile
Free, no signup. Run this tool's seven weighted mobile-layout checks and get a 0–100 diagnostic score, plus a phone-viewport preview as separate supporting evidence.
Free, no sign-up. The analysis reads your HTML the way a mobile browser would; the screenshot renders in headless Chrome on a 390×844 iPhone-sized viewport.
Les contrôles sont exécutés depuis notre serveur ; nous récupérons l’URL saisie et ne conservons pas les résultats. Results are kept in a short-lived cache, not stored long-term. Anonymous aggregate stats feed our research posts; domains are counted once via an anonymized hash and never stored in the clear. Des compteurs anonymes de résultats par exécution peuvent servir à la recherche agrégée ; les URL, domaines, adresses IP et identifiants ne sont jamais inclus, et aucune statistique issue de moins de 100 exécutions n’est publiée.
+ enregistre le site ou la page actuels. Utilisez ☆ à côté de tout site, page ou liste enregistré pour l’ajouter aux favoris. L’historique des vérifications récentes apparaît ci-dessous.
Créer une liste nommée
Cible remplie à partir de vos choix locaux.
Passeport du site Contexte local de ce site enregistré
Données locales
Les cibles enregistrées, les listes nommées et les résumés des vérifications récentes restent uniquement dans ce navigateur.
390×844 viewport · iPhone user agent
This is a static-analysis check plus a real render — fast and directional. It can’t see CSS applied by JavaScript frameworks at runtime, so pair a borderline score with the screenshot: if the page looks right on the phone frame, trust your eyes.
Compare a later score
Download this free analysis as a private JSON baseline, then import it after another run to see score and failing-check changes. Snapshots stay in your browser unless you choose to save a file.
Évaluer cet outil
What the score is made of
| Check | Threshold / points | What this free pass can confirm |
|---|---|---|
| Viewport | 30 points | width=device-width and zoom accessibility |
| Responsive CSS | 20 points | @media rules in inspected CSS |
| Fixed widths | 15 points · >400px warning | Markup-level width attributes and inline styles |
| Font sizes | 10 points · <12px warning | CSS declarations and legacy font tags |
| Tap targets / horizontal overflow | Needs a rendered layout pass | Not claimed by this free HTML score |
Viewport is 30 points
Without width=device-width, phones render your page at ~980px and shrink it to fit — every other mobile problem starts here. Disabling zoom costs points too: it’s an accessibility failure.
Layout checks
Responsive CSS (@media rules, including in external stylesheets), hard-coded widths over 400px, and sub-12px font sizes — the three classic ways a desktop layout breaks on a phone.
Delivery checks
Responsive images (srcset/<picture>), HTML page weight on mobile networks, and leftover <object>/<embed> plugin content that mobile browsers won’t run.
À propos de cet outil
Testez une page réelle sur sept signaux essentiels de compatibilité mobile : viewport, CSS adaptatif, largeurs fixes, taille de police, images, poids HTML et plugins. Le rapport ajoute un aperçu séparé du viewport de téléphone.
Fonctionnalités
- Score de 0 à 100 avec constats séparés pour la balise viewport, le responsive, les largeurs fixes et la typographie.
- Contrôles ciblés des images, du poids de page et des contenus de plugins incompatibles.
- Capture du viewport 390×844 pour comparer le rendu mobile à la page analysée.
- Recommandations techniques directement reliées à chaque constat et export du rapport.
Fonctionnement
Le serveur récupère l’URL fournie, examine les signaux mobiles dans le HTML et calcule un score pondéré. Chaque contrôle reçoit une gravité et une preuve, puis l’aperçu de viewport est chargé séparément pour valider visuellement la disposition.
Limites
- Le contrôle récupère une page publique et analyse le HTML jusqu’à une limite d’octets ; il ne représente pas tous les parcours connectés.
- Le score ne remplace ni un test sur de vrais appareils ni l’analyse des performances terrain Core Web Vitals.
- Les ressources chargées après interaction, les variantes géographiques et les bloqueurs peuvent modifier le rendu observé.
Questions fréquentes
Google a retiré son évaluation autonome de l’adaptation aux téléphones : cet outil la remplace-t-il ?
Google a supprimé l’outil autonome d’évaluation de l’adaptation aux téléphones ainsi que le rapport d’ergonomie dans Search Console à la fin de 2023. Cet outil applique son propre modèle de diagnostic en sept parties. Ces contrôles sont des heuristiques produit destinées à repérer les problèmes probables d’affichage sur téléphone, et non des critères d’éligibilité de Google ni un substitut aux vérifications sur des appareils réels.
L’évaluation exécute-t-elle JavaScript ?
L’évaluation de 0 à 100 provient d’une analyse statique du HTML et d’un maximum de quatre feuilles de style ; JavaScript n’est donc pas exécuté. La capture d’écran du téléphone est un aperçu produit avec Headless Chrome et constitue une preuve complémentaire utile, mais elle ne représente toujours qu’une seule zone d’affichage et un seul environnement de rendu. En cas de divergence, inspectez la page et vérifiez-la sur un échantillon représentatif d’appareils réels.
Pourquoi la balise de zone d’affichage m’a-t-elle coûté 30 unités ?
Le contrôle de la zone d’affichage vaut 30 des 100 unités, car il constitue le réglage unique dont dépendent tous les autres comportements sur téléphone. Sans balise <meta name="viewport">, les téléphones rendent votre page sur une largeur d’environ 980 px, puis la réduisent pour l’adapter : le texte devient minuscule et les appuis manquent leur cible. La correction tient en une ligne dans <head> : <meta name="viewport" content="width=device-width, initial-scale=1">. La désactivation de l’agrandissement, avec user-scalable=no ou maximum-scale=1, conserve l’essentiel du score, mais déclenche un avertissement, car elle nuit à l’accessibilité.
Qu’est-ce qui est considéré comme un élément à largeur fixe ?
Le contrôle « Contenu adapté à la zone d’affichage » signale tout élément dont la largeur codée en dur dépasse 400 px, qu’elle provienne de la propriété style:width utilisée directement ou d’un attribut width="…". Ce sont les largeurs les plus susceptibles de dépasser l’écran d’un téléphone et d’imposer un défilement latéral. Un ou deux éléments produisent un avertissement ; trois ou plus entraînent un échec. Utilisez plutôt max-width avec un pourcentage ou des unités relatives afin que les blocs se réduisent sur les petits écrans.
La capture d’écran indique « indisponible », mais j’ai quand même obtenu un score : est-ce un bug ?
Non. Le score et les sept contrôles proviennent de l’analyse HTML gratuite, exécutée en premier. La capture d’écran du téléphone est un rendu distinct et contingenté, qui peut être ignoré lorsqu’un plafond de coût quotidien ou mensuel volontaire est atteint, lorsque le moteur de rendu est brièvement occupé ou lorsque la page bloque les navigateurs sans interface. Dans tous ces cas, l’explication reste volontairement sobre et votre score ne change pas : l’analyse ne dépend jamais de la capture d’écran.
Problèmes courants et solutions
- Erreur Résultat : fenêtre d’affichage meta tag manquant ou non valide Solution : Ajoutez une balise meta avec width=device-width et un fenêtre d’affichage valide dans le head HTML de départ.
- Avertissement adaptatif CSS signals are manquant Solution : Ajoutez des points de rupture CSS adaptatifs qui ajustent la mise en page et la typographie aux petits écrans.
- Erreur Résultat : largeur fixe contenu dépasse le fenêtre d’affichage Solution : Remplacez fenêtre d’affichage-rupture fixe largeurs avec fluide max-width, pourcentage, grid, ou flex dimensionnement.
- Avertissement texte is trop petit pour téléphone lecture Solution : Augmentez le texte de fondement téléphone jusqu’à une taille lisible et évitez tout texte essentiel sous 12 points d’écran CSS.
- Avertissement visuels sont pas dimensionné de façon adaptative Solution : limiter visuels avec max-width:100% et height:auto, et fournir adaptatif origines où utile.
- Avertissement HTML poids de la page is élevé Solution : Supprimez les charges intégré inutiles, compressez les ressources et différez celles qui ne sont pas critiques pour réduire le transfert téléphone.
- Erreur non pris en charge contenu de extension is présent Solution : Remplacez Flash, Java mini-applications, ou autre non pris en charge contenu de extension avec natif HTML, CSS, et JavaScript.