Un testeur responsive (responsive checker) affiche une page à plusieurs largeurs d’écran. Les outils en ligne fonctionnent bien sur les pages publiques qui acceptent d’être intégrées dans un cadre, et échouent sur trois types de pages : localhost, les pages derrière une connexion et les sites qui envoient un en-tête interdisant l’intégration. Quand le cadre est vide, la cause est presque toujours cette dernière, et vous pouvez la confirmer en dix secondes. Pour ces pages, utilisez un outil qui tourne dans votre propre navigateur : le mode appareil de Chrome DevTools ou une extension de vue mobile.
Quel testeur responsive pour quelle page
| Page à vérifier | Outil en ligne | Ce qui marche à la place |
|---|---|---|
| Page publique qui accepte le cadre | Oui | N’importe quel outil en ligne |
| Page qui interdit le cadre | Cadre vide ou erreur | Mode appareil de DevTools, extension de vue mobile |
| Site de préproduction derrière une connexion | En général l’écran de connexion | DevTools ou une extension dans un onglet où vous êtes connecté |
| localhost | Non, les serveurs de l’outil n’y accèdent pas | DevTools ou une extension ; pour un vrai téléphone, voir tester localhost sur mobile |
Pourquoi un outil en ligne affiche un cadre vide
La plupart des outils en ligne chargent votre page dans un iframe. Un site peut demander au navigateur de ne pas s’afficher dans un cadre, avec l’en-tête X-Frame-Options ou la règle frame-ancestors de sa Content-Security-Policy. MDN décrit X-Frame-Options: DENY comme un blocage dans n’importe quel cadre, et SAMEORIGIN comme une autorisation seulement si tous les cadres parents ont la même origine que la page. Le mettre dans une balise <meta> n’a aucun effet : seul l’en-tête HTTP compte. Aucun outil ne peut contourner cela, car c’est le navigateur qui l’applique, pas l’outil.
Beaucoup de grands sites envoient l’un de ces en-têtes. Lorsque nous avons regardé le 28 octobre 2026, bbc.com répondait avec X-Frame-Options: SAMEORIGIN : on ne peut donc pas l’afficher dans le cadre d’un autre site. C’est la décision du site et cela n’a rien à voir avec votre mise en page.
Vérifiez en dix secondes si un site accepte le cadre
Lancez ceci dans un terminal et cherchez les deux en-têtes :
curl -sI https://example.com | grep -iE "x-frame-options|content-security-policy"Si vous voyez X-Frame-Options: DENY ou SAMEORIGIN, ou une Content-Security-Policy contenant frame-ancestors, les outils en ligne n’afficheront pas la page. Si aucun n’apparaît, l’intégration est permise. Dans Chrome, vous pouvez aussi ouvrir DevTools, aller dans Network, sélectionner la requête de la page et lire les en-têtes de réponse.
S’il s’agit de votre site, n’affaiblissez pas ces en-têtes pour faire plaisir à un testeur : ils protègent vos visiteurs du clickjacking. Testez avec un outil qui n’a pas besoin d’un cadre.
Quand le cadre est bloqué, utilisez un outil dans le navigateur
L’aperçu ci-dessus est lui aussi un outil en ligne : il met la page dans un cadre, avec la même limite. Quand un site interdit l’intégration, l’outil de vue mobile en ligne le dit au lieu d’afficher un cadre vide, et la solution est l’extension. Une extension de vue mobile, ou le mode appareil de DevTools, modifie l’onglet lui-même : l’en-tête ne compte donc pas, et les connexions et localhost fonctionnent comme dans n’importe quel onglet. Le guide de l’émulateur mobile de Chrome couvre DevTools, et extension de simulateur mobile ou DevTools aide à choisir.
Ce qu’un testeur responsive ne peut pas juger
Un testeur qui ne change que la largeur revient à tirer sur le bord de la fenêtre du navigateur. Il ne dit pas si le serveur envoie une autre page aux téléphones, comment la mise en page se comporte avec un long contenu ou un zoom à 200 %, ni comment Safari la dessine. La méthode complète, du balayage des largeurs aux captures automatiques, est dans comment tester le responsive design. Voyez le testeur comme un premier coup d’œil, pas comme une validation.
Questions fréquentes
Pourquoi un testeur responsive affiche-t-il une page vide pour mon site ?
Le plus souvent parce que votre site envoie X-Frame-Options ou une règle CSP frame-ancestors qui interdit le cadre. Vérifiez les en-têtes de réponse comme indiqué plus haut. Localhost et les pages derrière une connexion échouent pour une autre raison : les serveurs de l’outil ne peuvent pas les atteindre.
Peut-on tester localhost avec un testeur responsive en ligne ?
Non. Un outil en ligne ne peut pas atteindre une adresse qui n’existe que sur votre ordinateur. Utilisez Chrome DevTools ou une extension de vue mobile dans l’onglet où votre site local est ouvert.
Un testeur responsive suffit-il pour valider un site ?
Non. Il montre la mise en page à quelques largeurs. Une vraie validation demande aussi des tests de contenu extrême et une vérification sur de vrais appareils, ce que détaille le guide de test responsive.
Sources : MDN, X-Frame-Options (consulté le 28 octobre 2026) ; en-têtes de réponse de bbc.com demandés avec curl le 28 octobre 2026.