Responsive Viewer affiche la page web actuelle rendue à plusieurs tailles de viewport côte à côte — le tout sur un seul écran. Voyez instantanément l'apparence de votre design sur iPhone, iPad, téléphones Android, laptops et desktops en même temps. Faites défiler un viewport et tous les autres suivent, facilitant la comparaison d'une même section de contenu sur toutes les tailles d'appareils.
Tester des designs responsive implique traditionnellement de redimensionner la fenêtre du navigateur ou d'utiliser la barre d'outils d'appareils de DevTools pour basculer entre les tailles de viewport une par une. Cela fonctionne, mais vous ne pouvez voir qu'une seule taille à la fois — il est donc impossible de comparer simultanément l'apparence d'une section sur mobile et sur desktop. Responsive Viewer résout ce problème en rendant la page dans plusieurs viewports à la fois, affichés côte à côte sur votre écran. Choisissez parmi des profils d'appareils prédéfinis (iPhone 15, iPad Pro, Pixel 8, MacBook, Desktop 1440p) ou saisissez des dimensions personnalisées. Chaque viewport est une instance pleinement rendue de la page, pas une simple capture d'écran — faites défiler l'un et tous les autres se déplacent vers la même position. Ce défilement synchronisé vous permet de comparer exactement la même zone de contenu sur toutes les tailles d'appareils en un coup d'œil. C'est la façon la plus rapide de détecter les problèmes responsive : navigation qui se replie incorrectement, images qui débordent de leurs conteneurs, texte illisible sur petits écrans, ou espacements qui s'effondrent maladroitement.
Voyez la page actuelle rendue simultanément dans plusieurs tailles de viewport affichées côte à côte sur votre écran. Comparez les mises en page mobile, tablette et desktop d'un coup d'œil sans basculer entre les vues. Chaque viewport est un rendu entièrement fonctionnel de la page.
Choisissez parmi une bibliothèque de préréglages d'appareils populaires : iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) et Full HD Desktop (1920×1080). Les préréglages sont mis à jour avec les dimensions actuelles des appareils.
Saisissez n'importe quelle largeur et hauteur personnalisées pour tester des tailles de viewport non standard. Vous souhaitez vérifier l'apparence de la page à exactement 768px de large (le breakpoint tablette courant) ? Tapez-le simplement. Plusieurs viewports personnalisés peuvent être ajoutés aux côtés des préréglages.
Faites défiler un viewport et tous les autres se déplacent vers la même position verticale. Cela vous permet de comparer exactement la même section de contenu sur toutes les tailles d'appareils simultanément — voyez comment la zone hero, le tableau de tarification ou le pied de page se rendent sur mobile, tablette et desktop.
Chaque viewport est affiché dans un cadre d'appareil réaliste — bords de téléphone, bordures de tablette, chrome de laptop. Le contexte visuel aide les parties prenantes à comprendre quel viewport représente quel appareil lors des revues et présentations.
Activez ou désactivez des appareils individuels pour vous concentrer sur des comparaisons de tailles spécifiques. Vous ne comparez que mobile et desktop ? Désélectionnez les préréglages tablette. Vous souhaitez ne voir que les iPhones ? Désélectionnez tout le reste. Contrôle total sur les viewports visibles.
Après avoir implémenté un design responsive, utilisez Responsive Viewer pour vérifier que chaque section s'affiche correctement sur toutes les tailles d'appareils cibles. Détectez les débordements de texte, les problèmes de mise à l'échelle des images, les dysfonctionnements de navigation repliable et les incohérences d'espacement — le tout en une seule vue.
Montrez aux clients l'apparence de leur site web sur différents appareils lors d'une réunion de revue. La vue côte à côte est immédiatement intuitive — inutile d'expliquer les concepts de viewport. Les clients peuvent voir mobile, tablette et desktop simultanément.
Vous constatez une rupture de mise en page à une largeur spécifique ? Ajoutez un viewport personnalisé à la largeur en pixels exacte où le problème se produit et comparez-le avec des viewports légèrement plus larges et plus étroits pour identifier quel CSS breakpoint est à l'origine du problème.
Vérifiez si les longs titres se replient correctement sur mobile, si les tableaux de données deviennent défilables sur les petits écrans, si les champs de formulaire sont assez grands pour être touchés, et si les CTAs restent visibles et accessibles sur toutes les tailles d'appareils.
Utilisez la vue multi-appareils pour créer des visuels de présentation responsive percutants. Prenez une capture d'écran de Responsive Viewer montrant votre design sur 3 à 4 tailles d'appareils pour vos présentations de portfolio.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Responsive Viewer. La page passe en mode multi-viewport avec les cadres d'appareils affichés côte à côte.
La barre d'appareils en haut affiche les préréglages disponibles (iPhone, iPad, Pixel, MacBook, Desktop). Cliquez sur les appareils pour les activer ou désactiver. Les appareils sélectionnés apparaissent en tant que viewports en dessous.
Cliquez sur le bouton « Personnalisé » et saisissez des dimensions largeur × hauteur spécifiques pour ajouter un viewport personnalisé. Utile pour tester des valeurs de breakpoint exactes comme 768px, 1024px ou 1280px.
Faites défiler n'importe quel viewport — tous les autres suivent vers la même position. Comparez l'apparence d'une même section sur toutes les tailles d'appareils sélectionnées simultanément.
Cliquez à nouveau sur l'icône Responsive Viewer ou sur le bouton de fermeture pour quitter le mode multi-viewport et revenir à la vue normale en page unique.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
