Viewport

Hvad er viewport?

Det område, brugeren faktisk kan se på skærmen, kaldes viewport. Det er altså den synlige del af en webside i browseren eller på en enhed, mens resten først bliver synligt, når man scroller.

Viewporten ændrer sig efter skærmstørrelse og enhed. På mobil er den mindre, på tablet større og på desktop bredere, og derfor vises det samme indhold ikke altid på samme måde.

Begrebet er vigtigt i webdesign, fordi layout, tekst, billeder og knapper skal fungere godt i forskellige viewports. En korrekt tilpasset side gør indholdet lettere at læse og bruge, uanset hvilke skærme besøgende bruger.

Det synlige område i browseren

Det, brugeren faktisk kan se på en webside her og nu, afhænger ikke kun af selve siden. Det styres også af browserens vindue, skærmens størrelse og den zoom, der er valgt. Viewport er altså det felt, hvor indholdet bliver vist, mens resten af siden først kommer frem, når man scroller.

På en stor desktopskærm kan viewport være bred og høj, så flere elementer vises samtidig. På en mobil er pladsen langt mindre, og indholdet skal derfor tilpasse sig et smallere område. Det betyder, at tekst, billeder og menuer ofte placeres anderledes på små skærme end på store.

Zoom ændrer også oplevelsen. Hvis en bruger zoomer ind, bliver indholdet vist større, men der er plads til mindre ad gangen i browseren. Zoomer man ud, kan mere være synligt på én gang. Selv på samme skærm kan to brugere derfor se forskellige udsnit af den samme side, alt efter browservinduets størrelse og deres indstillinger.

Layout viewport og visual viewport

På mobilen er det nyttigt at skelne mellem den flade, siden bliver lagt ud på, og den del af siden, brugeren faktisk kan se lige nu. Layout viewport er den tekniske arbejdsflade, som browseren bruger til at beregne bredder, placeringer og linjeskift. Den fungerer som sidens grundplan. Visual viewport er derimod det synlige udsnit af siden på skærmen i det aktuelle øjeblik.

Forskellen kan sammenlignes med et stort kort og et lille vindue. Kortet svarer til layout viewporten: hele fladen findes, også selv om ikke alt er synligt på én gang. Vinduet svarer til visual viewporten: det viser kun den del, du kigger på her og nu. Når brugeren scroller, flytter vinduet sig hen over kortet. Selve kortet ændrer ikke nødvendigvis størrelse.

Det bliver især tydeligt ved zoom på mobil. Hvis en bruger zoomer ind på en tekstblok, bliver visual viewport mindre, fordi skærmen nu viser et mere begrænset udsnit i større størrelse. Layout viewport er som udgangspunkt stadig den flade, siden er opbygget efter. Derfor kan elementer godt være korrekt placeret i layoutet, selv om de midlertidigt ligger uden for det område, brugeren kan se. Det er netop denne forskel, der gør begreberne vigtige i responsivt design.

Sådan bruges viewport meta-tagget

For at en side vises korrekt på mobil, skal browseren vide, hvordan sidens bredde og skalering skal håndteres. Det styres med viewport meta-tagget, som placeres i sidens head. Den mest almindelige opsætning ser sådan ud: <meta name=”viewport” content=”width=device-width, initial-scale=1″>.

Indstillingen width=device-width fortæller browseren, at sidens bredde skal følge enhedens faktiske skærmbredde. Uden den kan mobilen forsøge at vise siden, som om den var lavet til en langt bredere computerskærm. Resultatet bliver ofte, at tekst, billeder og elementer skaleres ned og bliver små eller svære at læse.

initial-scale=1 angiver, at siden skal vises i normal zoom ved indlæsning. Det giver en mere forudsigelig visning, hvor layout, tekststørrelser og afstande starter på et naturligt niveau. Sammen hjælper de to indstillinger med at sikre læsbarhed, korrekt skalering og en mere brugervenlig mobiloplevelse på tværs af forskellige skærmstørrelser. Det er derfor et grundlæggende tag i responsivt webdesign og en vigtig del af en teknisk sund side.

Betydning for responsivt design og mobilvenlighed

Et website skal kunne tilpasse sig forskellige skærmstørrelser uden at miste læsbarhed eller funktion. Her spiller viewport en central rolle, fordi den definerer det synlige område, som browseren bruger til at vise siden. Når viewport er sat korrekt op, kan layout, billeder og tekst skalere hensigtsmæssigt på både mobil, tablet og computer.

I responsivt webdesign arbejder man tæt sammen med breakpoints og CSS media queries for at tilpasse indholdet til forskellige visningsbredder. Breakpoints angiver de punkter, hvor designet ændrer sig, mens media queries sørger for, at reglerne aktiveres på de rette skærmstørrelser. Viewporten er derfor grundlaget for, at disse tilpasninger faktisk rammer den enhed, brugeren sidder med.

Hvis viewport ikke er konfigureret korrekt, kan siden blive vist i en forkert skala. Det giver ofte meget små tekster, knapper der er svære at trykke på, eller vandret scrolling, fordi indholdet er bredere end skærmen. Det forringer brugeroplevelsen markant og kan også skade mobilvenligheden, som er vigtig i SEO og i den generelle brugervenlighed.

En korrekt viewport-opsætning hjælper derfor ikke kun designet, men også den praktiske anvendelse af siden. Brugere møder et mere overskueligt layout, og indholdet bliver lettere at læse og navigere i på tværs af enheder.

Typiske fejl i mobilvisning

Mange mobilproblemer opstår, fordi siden ikke fortæller browseren, hvordan den skal tilpasses små skærme. Den mest klassiske fejl er et manglende eller forkert viewport-meta-tag. Så vises siden i desktopbredde, teksten bliver meget lille, og brugeren må zoome og panorere for at læse indholdet.

En anden fejl er forkert skalering, for eksempel en fast bredde eller værdier, der låser visningen unødigt. Det giver en tung og upræcis oplevelse, især på telefoner. Knapper kan blive svære at trykke på, og formularfelter kan ende uden for skærmen.

Layoutet bryder også ofte på små enheder, når billeder, tabeller eller elementer har faste mål. Resultatet er vandret scrolling, overlappende indhold og tekst, der skubbes ud af visningen. Ret derfor designet mod fleksible bredder, responsive elementer og test på flere skærmstørrelser. Det forbedrer både brugervenlighed og den samlede kvalitetsoplevelse.

Forholdet til skærmopløsning og SEO

Et viewport er ikke det samme som en enheds skærmopløsning. Skærmopløsning beskriver, hvor mange fysiske pixels en skærm har, mens viewport angiver det område, browseren bruger til at vise siden. På mobil kan flere enheder derfor have meget forskellige opløsninger, men alligevel gengive et website i næsten samme visningsbredde. Det er netop derfor, viewport-indstillingen er central i responsivt design.

Hvis siden ikke er tilpasset mobile viewports, kan tekst blive for lille, elementer for tætte, og brugeren tvinges til at zoome eller scrolle uhensigtsmæssigt. Det svækker mobilvenligheden og kan påvirke, hvordan siden opleves i praksis. Samtidig kan forkert opsætning give problemer med rendering, fordi browseren må skalere indholdet på en uhensigtsmæssig måde.

Viewport er i sig selv ikke en selvstændig rangeringsfaktor. Men korrekt mobilvisning understøtter teknisk kvalitet og en bedre brugeroplevelse, som kan hænge sammen med signaler omkring mobilvenlighed og overordnede mål for eksempelvis Core Web Vitals. Derfor har viewport betydning for SEO indirekte, især når det handler om brugbarhed på tværs af skærme og en stabil visning af sidens indhold.