El Visualitzador reactiu mostra la pàgina web actual renderitzada segons les mides dels visors de diversos dispositius, un costat de l'altre — tot en una sola pantalla. Mira com queda el teu disseny en un iPhone, iPad, mòbils Android, portàtils i ordinadors d'escriptori simultàniament. Desplaça't per un visor i tots els altres el seguiran, facilitant la comparació de la mateixa secció de contingut en totes les mides de dispositius.
Provar dissenys reactius tradicionalment implica canviar la mida de la finestra del navegador o utilitzar la barra d'eines de dispositius de les DevTools per anar canviant de visor d'un en un. Això funciona, però només pots veure una mida cada vegada — fet que impossibilita comparar com queda una secció al mòbil i a l'escriptori simultàniament. El Visualitzador reactiu ho soluciona renderitzant la pàgina en múltiples visors alhora, mostrats un costat de l'altre a la pantalla. Tria entre perfils de dispositius predefinits (iPhone 15, iPad Pro, Pixel 8, MacBook, escriptori 1440p) o introdueix dimensions personalitzades. Cada visor és una instància de la pàgina completament renderitzada, no una captura estàtica — desplaça't per un i tots els altres es desplaçaran a la mateixa posició. Aquest desplaçament sincronitzat et permet comparar exactament la mateixa àrea de contingut en totes les mides de dispositius d'un cop d'ull. És la manera més ràpida de detectar problemes de reactivitat: navegació que es trenca incorrectament, imatges que sobresurten dels contenidors, text que es torna il·legible en pantalles petites o espais que col·lapsen de manera estranya.
Mira la pàgina actual renderitzada simultàniament en múltiples mides de visor mostrades un costat de l'altre a la pantalla. Compara dissenys de mòbil, tauleta i escriptori d'un cop d'ull sense haver de canviar de vista. Cada visor és un render funcional de la pàgina.
Tria d'una biblioteca de dispositius predefinits populars: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) i escriptori Full HD (1920×1080). Els predefinits s'actualitzen amb les dimensions dels dispositius actuals.
Introdueix qualsevol amplada i alçada personalitzada per provar mides de visor no estàndard. Necessites comprovar com es veu la pàgina a exactament 768px d'amplada (el punt de ruptura habitual de les tauletes)? Només l'has d'escriure. Es poden afegir múltiples visors personalitzats juntament amb els predefinits.
Desplaça't per un visor i tots els altres es mouran a la mateixa posició vertical. Això et permet comparar exactament la mateixa secció de contingut en totes les mides de dispositius simultàniament — veu com es renderitzen l'àrea principal (hero), la taula de preus o el peu de pàgina en mòbils, tauletes i escriptors.
Cada visor es mostra dins d'un marc de dispositiu realista — bisells de telèfons, vores de tauletes, elements de portàtil. El context visual ajuda els interessats a entendre quin visor representa cada dispositiu durant les revisions i presentacions.
Activa i desactiva dispositius individuals per centrar-te en comparacions de mides específiques. Només compares el mòbil i l'escriptori? Desselecciona els predefinits de tauleta. Només necessites veure els iPhones? Desselecciona tota la resta. Control total sobre quins visors són visibles.
Després d'implementar un disseny reactiu, utilitza el Visualitzador reactiu per verificar que cada secció es veu correctament en totes les mides de dispositius objectiu. Detecta desbordaments de text, problemes d'escalat d'imatges, errors en el col·lapse de la navegació i espais inconsistents — tot en una sola vista.
Mostra als clients com es veu el seu lloc web en els diferents dispositius durant una reunió de revisió. La vista un costat de l'altre és intuïtiva a l'instant — no cal explicar conceptes de visors. Els clients poden veure el mòbil, la tauleta i l'escriptori simultàniament.
Veus que el disseny es trenca en una amplada específica? Afegeix un visor personalitzat a l'amplada exacta de píxels on es produeix el problema i compara-ho amb visors una mica més amples i més estrets per identificar quin punt de ruptura CSS està causant el problema.
Comprova si els títols llargs es divideixen correctament al mòbil, si les taules de dades permeten el desplaçament en pantalles petites, si les entrades de formulari són prou grans per ser tocades i si les Crides a l'Acció (CTAs) romanen visibles i accessibles en totes les mides de dispositius.
Utilitza la vista multidispositiu per crear imatges atractives que mostrin el disseny reactiu. Fes una captura de pantalla del Visualitzador reactiu mostrant el teu disseny en 3 o 4 mides de dispositius per a presentacions de portafolis.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona de Visualitzador reactiu. La pàgina passarà al mode multi-visor amb marcs de dispositius mostrats un costat de l'altre.
La barra de dispositius de la part superior mostra els predefinits disponibles (iPhone, iPad, Pixel, MacBook, Desktop). Fes clic als dispositius per activar-los o desactivar-los. Els dispositius seleccionats apareixerà com a visors a sota.
Fes clic al botó "Personalitzat" i introdueix dimensions específiques d'amplada × alçada per afegir un visor personalitzat. Útil per provar valors exactes de punts de ruptura com 768px, 1024px o 1280px.
Desplaça't per qualsevol visor — tots els altres el seguiran fins a la mateixa posició. Compara com es veu la mateixa secció en totes les mides de dispositius seleccionades simultàniament.
Torna a fer clic a la icona del Visualitzador reactiu o al botó de tancar per sortir del mode multi-visor i tornar a la vista normal d'una sola pàgina.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
