Test de site responsive (voir sur mobile, tablette et ordinateur)

Test de site responsive (voir sur mobile, tablette et ordinateur): à quoi ça sert

Avant de publier, vérifiez que le site fonctionne sur des écrans de toutes tailles. Saisissez l’adresse et voyez le site côte à côte sur petit mobile (360 px), iPhone SE (375 px), iPhone 15 (393 px), tablette (768 px), ordinateur portable (1366 px) et Full HD (1920 px), chacun à sa largeur réelle et réduit pour tenir à l’écran.

Passez en mode paysage, créez une largeur personnalisée et rechargez tous les cadres en une fois. Cela fonctionne avec votre localhost et avec les sites qui autorisent l’affichage dans un autre ; ceux qui le bloquent pour des raisons de sécurité (X-Frame-Options) s’affichent en blanc, et la page en explique la raison.

Mode d’emploi

1. Saisissez l’adresse du site.
2. Choisissez les écrans et le zoom.
3. Faites défiler les cadres et vérifiez la mise en page.

Quand l’utiliser

• Vérifier un site avant de le publier.
• Montrer au client le rendu sur mobile.
• Tester les media queries.

Questions fréquentes

Pourquoi certains sites s’affichent-ils en blanc ?

De nombreux sites (Google, Instagram, banques) envoient un en-tête de sécurité (X-Frame-Options ou frame-ancestors) qui interdit l’affichage dans un autre site, pour éviter les attaques de clickjacking. Votre propre site fonctionne normalement ; sinon, il a aussi cette protection, ce qui est une bonne chose.

Est-ce identique à un vrai mobile ?

La largeur est la même, donc la mise en page, les media queries et les retours à la ligne sont identiques. Ce qui change, c’est le type de toucher, la police du système et la densité de pixels.

Puis-je tester un site qui se trouve encore sur mon ordinateur ?

Oui. Saisissez l’adresse locale, comme http://localhost:3000.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires