Tester un site sur plusieurs tailles d’écran

Tester un site sur plusieurs tailles d’écran: à quoi ça sert

Saisissez l’adresse et choisissez les appareils : petit mobile (360 px), iPhone (390), grand mobile (430), tablette (768), ordinateur portable (1280) et moniteur (1440). Chaque écran affiche la page à la largeur réelle de l’appareil, réduite selon l’échelle choisie, et vous pouvez faire défiler chacun d’eux.

Cela fonctionne avec vos propres sites et avec localhost. Les sites qui interdisent d’être ouverts dans d’autres s’affichent en blanc.

Mode d’emploi

1. Saisissez l’adresse du site.
2. Choisissez les appareils, l’échelle et la hauteur.
3. Faites défiler chaque écran et vérifiez la mise en page.

Quand l’utiliser

• Vérifier un site responsive avant de le publier.
• Montrer à un client le rendu du site sur mobile.
• Tester des sites en développement sur localhost.

Questions fréquentes

Pourquoi certains sites ne s’affichent-ils pas ?

De nombreux grands sites (Google, banques, réseaux sociaux) interdisent d’être ouverts dans un autre site, via les en-têtes X-Frame-Options ou frame-ancestors, et l’écran reste blanc. Les sites personnels s’affichent en général normalement. Si le vôtre n’apparaît pas, utilisez le mode appareil des outils de développement du navigateur (F12).

L’aperçu est-il identique à un vrai mobile ?

La largeur est la même, donc la mise en page responsive aussi. Mais le navigateur reste celui de l’ordinateur : polices, défilement, toucher et fonctionnalités du mobile peuvent différer. Testez aussi sur un vrai appareil avant de publier.

Cela fonctionne-t-il avec des sites en localhost ?

Oui, si le serveur local tourne sur votre ordinateur et que l’adresse commence par http://localhost ou http://127.0.0.1.

Vraiment gratuit ?

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

Outils similaires