Capture responsive
Ce qu'est une capture responsive, les tailles de fenêtre d'affichage courantes et les erreurs à éviter lors des captures sur plusieurs appareils.
Une capture responsive est une image d'une page web rendue à une largeur et une hauteur de fenêtre d'affichage précises, en général réalisée en série à plusieurs tailles. Les sites responsive utilisent les requêtes média CSS, les requêtes de conteneur et des mises en page fluides, si bien que la même URL peut afficher une navigation, un nombre de colonnes et un recadrage d'image différents à chaque largeur.
Un navigateur n'affiche la mise en page téléphone que si la fenêtre d'affichage elle-même est étroite. Réduire une capture de bureau ne modifie pas la mise en page. Les outils règlent donc la taille de la fenêtre d'affichage, et souvent le facteur d'échelle de l'appareil et l'user agent, avant le chargement de la page.
Pourquoi les captures responsive comptent
Les revues de design, les validations client et l'assurance qualité ont besoin de preuves de l'apparence d'une page à chaque point de rupture. Un bogue de mise en page n'apparaît souvent qu'à une seule largeur, comme un menu qui chevauche le logo sur tablette. Un ensemble de captures à des tailles fixes rend ces bogues visibles en une seule revue.
Tailles de fenêtre d'affichage courantes
| Catégorie | Exemple de fenêtre d'affichage |
|---|---|
| Bureau | 1920×1080, 1440×900, 1366×768 |
| Tablette | 768×1024 en portrait |
| Téléphone | 390×844, 360×800 |
Les tailles sont exprimées en pixels CSS. Un téléphone à une échelle 3x rend 390×844 pixels CSS avec 1170×2532 pixels physiques.
Réaliser des captures responsive
- Dans un navigateur, ouvrez les outils de développement, passez en mode appareil et choisissez une taille.
- Dans du code, réglez la fenêtre d'affichage dans Playwright ou Puppeteer avant la navigation.
- Dans Website Capture de Temposhot (Command+2), choisissez un Device : Desktop 1920×1080, Tablet 768×1024 ou Mobile 390×844. Chaque ligne d'URL peut avoir son propre appareil et sa propre Area, et Render preview affiche une ligne avant l'exécution complète.
Erreurs courantes avec les captures responsive
- Redimensionner une capture de bureau au lieu de la rendre à la largeur cible.
- Mélanger des captures de fenêtre d'affichage et de page entière dans un même jeu de comparaison.
- Laisser une bannière de cookies qui recouvre la moitié de la mise en page téléphone.
- Comparer des captures réalisées à des facteurs d'échelle différents.
Vous refaites les mêmes captures encore et encore ?
Ajoutez chaque URL une fois par appareil dans Website Capture, puis lancez la liste en une seule passe. Consultez les options de capture.
Questions fréquentes
Une capture responsive est-elle la même chose qu'une capture mobile ?
Non. Une capture mobile a une seule taille. Les captures responsive forment un ensemble réparti sur plusieurs tailles.
Ai-je besoin d'un vrai téléphone ?
Pour les contrôles de mise en page, un navigateur à la taille de fenêtre d'un téléphone suffit en général. Les bogues propres à un appareil nécessitent toujours un appareil réel.
Sources
Ressources associées
- Démarrage rapide de Website Capture : première exécution avec une liste d'URL.
- Tâches et résultats : états des lignes et relances.
- Calculateur de ratio d'aspect : vérifier les proportions d'une taille.
Vous prenez toujours les mêmes captures d'écran ?
Temposhot capture un écran, une fenêtre ou une zone à intervalles programmés et exporte l'ensemble en PDF, en images, en ZIP ou en MP4. Les outils gratuits du navigateur ne permettent de traiter qu'une image à la fois.
Ressources associées
Termes associés
- Capture de fenêtre d'affichageCe qu'est une capture de fenêtre d'affichage, en quoi elle diffère de la capture de page entière et quand elle est le bon choix.
- Capture de page entièreCe qu'est une capture de page entière, en quoi elle diffère des captures de fenêtre d'affichage et de défilement, et quand l'utiliser.
- Maquette d'appareilCe qu'est une maquette d'appareil, comment placer des captures dans un cadre d'appareil et où les équipes les utilisent.
- Capture par lotCe qu'est une capture par lot, en quoi elle diffère d'une capture unique et où les équipes l'utilisent.