Comment utiliser : Simulateur d’appareils web
- Saisissez l’adresse de votre site et cliquez sur Prévisualiser.
- Choisissez une taille de téléphone, de tablette, d’ordinateur portable ou de bureau, puis utilisez Pivoter pour le mode paysage.
- Utilisez Comparer pour voir les affichages téléphone, tablette et ordinateur portable côte à côte.
- Ajoutez vos propres tailles sous Ajouter un appareil personnalisé. Elles sont enregistrées dans ce navigateur.
Ce que montre ce simulateur
Il charge votre page à la largeur et à la hauteur d’un appareil, de sorte que votre mise en page responsive et vos points de rupture CSS se comportent comme ils le feraient à cette taille. C’est un moyen rapide de repérer les mises en page cassées, les textes tronqués et les tableaux qui débordent.
Ce qu’il ne peut pas montrer
Ce n’est pas un vrai appareil. Il ne modifie pas le moteur du navigateur : une taille d’iPhone affichée ici reste donc exécutée dans votre propre navigateur. Les fonctionnalités qui dépendent de l’agent utilisateur ou du matériel tactile peuvent se comporter différemment. Avant la mise en ligne, testez sur de vrais téléphones ou utilisez le mode appareil de votre navigateur pour plus de détails.
Pourquoi certains sites restent vides
De nombreux sites envoient X-Frame-Options ou une règle frame-ancestors, ce qui les empêche de se charger dans une autre page. Lorsque l’outil détecte ces règles, il affiche à la place une vraie capture d’écran à la taille de l’appareil : vous pouvez ainsi vérifier la mise en page, mais les liens et le défilement ne fonctionnent pas. Pour des captures de page entière, utilisez l’outil Capture d’écran d’un site mobile.
Les tailles d’écran sont-elles exactes ?
Les tailles correspondent à des valeurs courantes de fenêtre d’affichage en pixels CSS, et non à la résolution physique. Les navigateurs réels perdent une partie de la hauteur à cause de leurs barres d’outils ; considérez donc ces valeurs comme un guide approximatif.
Aussi recherché comme : testeur de site responsive, test site mobile, test de site responsive, tester un site sur différents appareils, simulateur iphone en ligne, testeur de taille d’écran, affichage site sur ipad, affichage mobile d’un site.
Outils complémentaires : Simulateur d’appareils web
- Capture d’écran de site web — Saisissez une URL et obtenez une capture d’écran pleine page réalisée dans un vrai navigateur Chrome, à la largeur ordinateur, tablette ou téléphone, jusqu’à une résolution 3× (Retina), avec les bandeaux de cookies masqués.
- Ma résolution d'écran — Les dimensions de votre écran et de la fenêtre du navigateur en pixels CSS, le ratio de pixels de l’appareil et la résolution physique réelle, mesurés en direct par votre navigateur.
- Test écran tactile — Touchez la zone ci-dessous pour voir chaque doigt détecté par votre écran.
- Test de vitesse de page — Lancez Google Lighthouse sur n’importe quelle URL, en version mobile ou desktop.