À quoi ressemble votre site sur iPhone SE, iPad et un écran 4K ?
Collez une URL, cliquez sur "Charger", choisissez un preset de viewport dans la barre de pastilles (iPhone SE 375×667, iPhone 14 Pro 393×852, iPad 768×1024, laptop 1280×800, FullHD 1920×1080), ou faites glisser les deux curseurs pour régler n'importe quelle taille au pixel près (320-2560 de large, 480-1440 de haut). La page s'affiche dans une iframe avec cette largeur et hauteur exactes.
C'est un aperçu rendu par le navigateur, pas un émulateur d'appareil. Le moteur de votre navigateur (Chrome, Firefox, Safari) fait le rendu, donc CSS, polices et layouts se comportent comme sur un vrai écran de cette taille. Vous n'avez pas d'événements tactiles, vous ne simulez pas le plafond de RAM d'un téléphone, vous ne pouvez pas déclencher `window.matchMedia('(hover: none)')` - pour ça, utilisez Chrome DevTools ou le mode responsive de Firefox.
Parfait pour vérifier rapidement les breakpoints pendant une revue de code, faire une démo à un client sur trois tailles côte à côte, ou vérifier que le nouveau hero du design system ne casse pas à 375 px.
Mode d'emploi
- Collez l'URL complète de la page en haut (par exemple `https://votre-site.fr/landing`). Vous pouvez omettre le schéma `https://` - on l'ajoute.
- Cliquez sur "Charger" ou appuyez sur Entrée. La page se charge directement depuis le serveur cible vers l'iframe - aucun proxy intermédiaire.
- Choisissez un preset d'appareil dans la barre de pastilles (iPhone SE / iPhone 14 / iPad / Desktop / FullHD) ou utilisez les deux curseurs pour une taille personnalisée.
- Les dimensions actuelles s'affichent en direct en haut à droite (par exemple `390 × 844`). Cliquez sur "Pivoter" pour échanger largeur et hauteur (portrait ↔ paysage).
- Cliquez sur "Rafraîchir" pour forcer le rechargement de l'iframe (utile après le déploiement d'un nouveau build). "Ouvrir dans un nouvel onglet" ouvre la page en taille réelle.
- Cliquez sur "Copier le lien" pour mettre dans le presse-papiers une URL d'aperçu avec `?url=...&w=...&h=...` - partagez-la avec un collègue et il aura exactement le même aperçu.
- Si vous voyez une carte rouge "Le site bloque l'intégration", le serveur cible a envoyé `X-Frame-Options: DENY/SAMEORIGIN` ou `Content-Security-Policy: frame-ancestors`. Ouvrez plutôt le site dans un nouvel onglet - le navigateur l'affichera normalement.
Quand cet outil est utile
Sept situations typiques où une vérification responsive rapide bat le recours aux DevTools :
- Revoir une PR de nouveau composant. Un junior pousse un nouveau hero - vous vérifiez en 30 secondes s'il marche sur iPhone SE (le plus petit téléphone encore en usage), iPad et laptop. Pas besoin de cloner le repo.
- Démo à un client. Appel Zoom, vous ouvrez trois onglets de cet outil avec différents presets et montrez la même page sur desktop, tablette et téléphone simultanément. Le client voit que tout marche.
- Reproduction de bug QA. Un testeur a signalé "le menu casse à 412 px de large". Vous réglez exactement 412 sur le curseur, reproduisez le bug, prenez une capture, attachez au ticket Jira.
- Regarder la concurrence. Un designer veut voir à quoi ressemble le site d'un concurrent en 4K (1920×1080) et sur Galaxy S22 (360×800). Collez l'URL, cliquez sur le preset, fini.
- Valider une landing avant une campagne Google Ads. La validation de la pub demande "mobile-friendly". Vous vérifiez à 375 px que le CTA est visible sans scroller et que les polices ne sont pas plus petites que 16 px.
- Vérifier un site en vue mobile depuis votre ordinateur. Obtenez l'aperçu 375×667 sans sortir votre téléphone et sans déployer en staging.
- Sanity check post-déploiement. Vous avez livré la 2.3.0 en prod - vérifiez sur trois tailles que rien n'est cassé. "Rafraîchir" charge la version fraîche (cache HTML invalidé, mais les assets CDN peuvent persister).
Après avoir vérifié le layout, vérifiez aussi comment le lien apparaît sur les réseaux sociaux - utilisez l'aperçu OpenGraph. Et vérifiez SSL (inspecteur de certificat SSL) et DNS (consultation DNS) - quand une page charge lentement ou pas du tout, le problème se loge généralement là.