Responsiv visning viser den aktuelle webside gengivet i flere enhedsviewport-størrelser side om side — alt på én skærm. Se hvordan dit design ser ud på iPhone, iPad, Android-telefoner, laptops og desktops samtidigt. Rul ét viewport, og alle andre følger med, hvilket gør det nemt at sammenligne den samme indholdssektion på tværs af alle enhedsstørrelser.
Test af responsivt design kræver traditionelt at ændre størrelse på browservinduet eller bruge DevTools' enhedsværktøjslinje til at skifte mellem viewport-størrelser én ad gangen. Dette fungerer, men du kan kun se én størrelse ad gangen — hvilket gør det umuligt at sammenligne, hvordan en sektion ser ud på mobil vs. desktop samtidigt. Responsiv visning løser dette ved at gengive siden i flere viewports på én gang, vist side om side på din skærm. Vælg fra preset-enhedsprofiler (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Desktop) eller indtast brugerdefinerede dimensioner. Hvert viewport er en fuldt gengivet instans af siden, ikke et statisk skærmbillede — rul ét, og alle andre ruller til den samme position. Denne synkroniserede rulning lader dig sammenligne det præcise indholdssområde på tværs af alle enhedsstørrelser med et øjekast. Det er den hurtigste måde at opdage responsive problemer: navigation, der ombryder forkert, billeder, der overløber deres beholdere, tekst, der bliver ulæselig på små skærme, eller afstand, der kollapser akavet.
Se den aktuelle side gengivet simultant i flere viewport-størrelser vist side om side på din skærm. Sammenlign mobil-, tablet- og desktop-layouts med et øjekast uden at skifte mellem visninger. Hvert viewport er en fuldt funktionel gengivelse af siden.
Vælg fra et bibliotek af populære enhedspresets: iPhone 15 (393x852), iPhone SE (375x667), iPad (820x1180), iPad Pro (1024x1366), Pixel 8 (412x915), MacBook Pro (1440x900) og Full HD Desktop (1920x1080). Presets opdateres med aktuelle enhedsdimensioner.
Indtast enhver brugerdefineret bredde og højde for at teste ikke-standardiserede viewport-størrelser. Har du brug for at kontrollere, hvordan siden ser ud ved præcis 768px bredde (det almindelige tablet-breakpoint)? Skriv det bare. Flere brugerdefinerede viewports kan tilføjes ved siden af presets.
Rul ét viewport, og alle andre ruller til den samme lodrette position. Dette lader dig sammenligne den præcise indholdssektion på tværs af alle enhedsstørrelser simultant — se hvordan hero-området, prissætningstabellen eller footeren gengives på mobil, tablet og desktop.
Hvert viewport vises inden for en realistisk enhedsramme — telefon-bezels, tablet-kanter, laptop-chrome. Den visuelle kontekst hjælper interessenter med at forstå, hvilket viewport der repræsenterer hvilken enhed under anmeldelser og præsentationer.
Slå individuelle enheder til og fra for at fokusere på specifikke størrelsessammenligninger. Sammenligner du kun mobil og desktop? Fravælg tablet-presets. Har du brug for kun at se iPhones? Fravælg alt andet. Fuld kontrol over hvilke viewports der er synlige.
Efter implementering af et responsivt design, brug Responsiv visning til at verificere, at hver sektion ser korrekt ud på tværs af alle måldevicestørrelser. Fang tekstoverløb, billedskaleringsProblemer, navigationskollaps-problemer og afstandsinkonsistenser — alt i én visning.
Vis klienter, hvordan deres hjemmeside ser ud på tværs af enheder under et anmeldelsesmøde. Side-om-side-visningen er umiddelbart intuitiv — ingen grund til at forklare viewport-koncepter. Klienter kan se mobil, tablet og desktop simultant.
Ser du et layout bryde ved en specifik bredde? Tilføj et brugerdefineret viewport ved den præcise pixelbredde, hvor problemet opstår, og sammenlign det med lidt bredere og smallere viewports for at identificere, hvilket CSS-breakpoint der forårsager problemet.
Tjek om lange overskrifter ombryder korrekt på mobil, om datatabeller bliver rullebare på små skærme, om forminput er store nok til at trykke på, og om CTAs forbliver synlige og tilgængelige på tværs af alle enhedsstørrelser.
Brug multi-enhedsvisningen til at oprette overbevisende responsivt design-showcase-billeder. Tag et skærmbillede af Responsiv visning, der viser dit design på tværs af 3-4 enhedsstørrelser til portfolio-præsentationer.
Åbn den flydende DevSuite Pro-dock, og klik på Responsiv visning-ikonet. Siden skifter til multi-viewport-tilstand med enhedsrammer vist side om side.
Enhedslisten øverst viser tilgængelige presets (iPhone, iPad, Pixel, MacBook, Desktop). Klik på enheder for at slå dem til/fra. Valgte enheder vises som viewports nedenunder.
Klik på Brugerdefineret-knappen og indtast specifikke bredde x højde dimensioner for at tilføje et brugerdefineret viewport. Nyttigt til at teste præcise breakpoint-værdier som 768px, 1024px eller 1280px.
Rul et viewport — alle andre følger til den samme position. Sammenlign hvordan den samme sektion ser ud på tværs af alle valgte enhedsstørrelser samtidigt.
Klik på Responsiv visning-ikonet igen eller luk-knappen for at afslutte multi-viewport-tilstand og vende tilbage til den normale enkeltsidesvisning.
Installer DevSuite Pro gratis og lås opp 39+ utviklerverktøy for nettleseren din.
