Responsive Viewer toont de huidige webpagina weergegeven in meerdere apparaatviewport-groottes naast elkaar — allemaal op één scherm. Zie hoe uw ontwerp eruitziet op iPhone, iPad, Android-telefoons, laptops en desktops tegelijk. Scroll één viewport en alle andere volgen, waardoor u gemakkelijk dezelfde inhoudssectie over alle apparaatgroottes kunt vergelijken.
Het testen van responsieve ontwerpen betekent traditioneel het wijzigen van het formaat van het browservenster of het gebruik van de apparaattoolbar van DevTools om de ene na de andere maatvoering van de viewport in te schakelen. Dit werkt, maar u kunt slechts één grootte tegelijk zien — wat het onmogelijk maakt om gelijktijdig te vergelijken hoe een sectie eruitziet op mobiel versus desktop. Responsive Viewer lost dit op door de pagina in meerdere viewports tegelijk weer te geven, naast elkaar op uw scherm weergegeven. Kies uit vooraf ingestelde apparaatprofielen (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Desktop) of voer aangepaste afmetingen in. Elke viewport is een volledig weergegeven exemplaar van de pagina, geen statische schermafbeelding — scroll één en alle anderen schuiven naar dezelfde positie. Met deze gesynchroniseerde scrolling kunt u het exacte dezelfde inhoudsgebied over alle apparaatgroottes in één oogopslag vergelijken. Het is de snelste manier om responsieve problemen op te sporen: navigatie die incorrect omwikkelt, afbeeldingen die uit hun containers overlopen, tekst die onleesbaar wordt op kleine schermen of afstand die onelegant instort.
Zie de huidige pagina gelijktijdig weergegeven in meerdere viewportgroottes naast elkaar op uw scherm weergegeven. Vergelijk mobiele, tablet en desktoplayouts in één oogopslag zonder tussen weergaven te wisselen. Elke viewport is een volledig functioneel weergegeven van de pagina.
Kies uit een bibliotheek van populaire apparaatvoorinstellingen: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) en Full HD Desktop (1920×1080). Voorinstellingen worden bijgewerkt met huidige apparaatafmetingen.
Voer aangepaste breedte en hoogte in om niet-standaard viewportgroottes te testen. Wilt u controleren hoe de pagina eruitziet op exact 768px breed (het veelgebruikte tabletbreekpunt)? Typ het gewoon in. Meerdere aangepaste viewports kunnen naast voorinstellingen worden toegevoegd.
Scroll één viewport en alle andere schuiven naar dezelfde verticale positie. Dit laat u het exacte dezelfde inhoudssectie over alle apparaatgroottes tegelijk vergelijken — zie hoe het hero-gedeelte, prijstabel of voettekst mobiel, tablet en desktop weergeven.
Elke viewport wordt weergegeven in een realistisch apparaatframe — telefoonranden, tabletgrenzen, laptopchrome. De visuele context helpt belanghebbenden begrijpen welke viewport welk apparaat vertegenwoordigt tijdens beoordelingen en presentaties.
Schakel afzonderlijke apparaten in en uit om u op specifieke grootteelvergelijken te concentreren. Wilt u alleen mobiel en desktop vergelijken? Deselecteer de tabletvoorinstellingen. Alleen iPhones nodig zien? Deselecteer alles anders. Volledig controle over welke viewports zichtbaar zijn.
Nadat u een responsief ontwerp hebt geïmplementeerd, gebruikt u Responsive Viewer om te verifiëren dat elke sectie correct eruitziet voor alle doelapparaatgroottes. Vang tekstoverloop, afbeeldingsschaalproblemen, navigatiecollapsproblemen en afstandsinconsistenties op — allemaal in één weergave.
Toon cliënten hoe hun website over apparaten eruitziet tijdens een beoordelingsvergadering. De naast elkaar geplaatste weergave is onmiddellijk intuïtief — geen noodzaak om viewportconcepten uit te leggen. Cliënten kunnen mobiel, tablet en desktop tegelijk zien.
Ziet u een layoutbreuk op een bepaalde breedte? Voeg een aangepaste viewport toe op de exacte pixelbreedte waar het probleem optreedt en vergelijk deze met iets bredere en nauwere viewports om te bepalen welk CSS-breekpunt het probleem veroorzaakt.
Controleer of lange koppen correct op mobiel omwikkelen, of gegevenstabellen op kleine schermen schuifbaar worden, of formulierinvoeren groot genoeg zijn om aan te raken en of CTA's zichtbaar en toegankelijk blijven over alle apparaatgroottes.
Gebruik de multi-apparaatweergave om indrukwekkende responsieve ontwerpcaseafbeeldingen te maken. Maak een schermafbeelding van de Responsive Viewer met uw ontwerp over 3-4 apparaatgroottes voor portfoliopresentaties.
Open het floating dock van DevSuite Pro en klik op het Responsieve Viewer-pictogram. De pagina gaat over naar multi-viewportmodus met apparaatframes naast elkaar weergegeven.
De apparaatbalk bovenaan toont beschikbare voorinstellingen (iPhone, iPad, Pixel, MacBook, Desktop). Klik op apparaten om ze in/uit te schakelen. Geselecteerde apparaten verschijnen als viewports hieronder.
Klik op de knop "Aangepast" en voer specifieke breedte × hoogte-afmetingen in om een aangepaste viewport toe te voegen. Handig voor het testen van exacte breekpuntwaarden zoals 768px, 1024px of 1280px.
Scroll elke viewport — alle andere volgen naar dezelfde positie. Vergelijk hoe dezelfde sectie eruitziet over alle geselecteerde apparaatgroottes tegelijk.
Klik opnieuw op het Responsieve Viewer-pictogram of op de sluitknop om de multi-viewportmodus af te sluiten en terug te keren naar de normale weergave met één pagina.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
