Kort fortalt: Viewport meta-tagget i HTML (<meta name="viewport" content="…">) fortæller mobilbrowseren, hvordan sidens layoutbredde og zoom skal forholde sig til den fysiske skærm. Uden det antager mange mobilbrowsere en “desktop-lignende” bredde (fx 980px) og zoomer brugeren ud - hvilket giver ubrugelig typografi, små trykområder og uforudsigeligt layout. For et moderne responsivt site er et korrekt viewport grundlaget for at CSS med media queries overhovedet matcher den enhed, brugeren holder i hånden.
Hvad viewport ikke er
Det er ikke en erstatning for responsivt design. Viewport siger kun “behandl skærmen som X bred”; det er stadig dit stylesheet, der styrer kolonner, fontstørrelser og afstande. Uden solid CSS vil siden stadig være ubehagelig - bare med rigtig “logisk” bredde.
Det er heller ikke det samme som srcset og sizes til billeder - men det samspiller: når viewport er forkert, kan sizes-beregningen og valg af billedfil give suboptimalt resultat til LCP.
Standardmønster og hvorfor det bruges
Det mest udbredte udgangspunkt er:
width=device-width - brug enhedens fysiske bredde som CSS-pixelbredde.
initial-scale=1 - start med zoom 1:1, så tekst og UI matcher forventningen.
Det gør, at dine rem/em-baserede typografier og dine breakpoints giver mening på mobil.
Hvordan det hænger sammen med Core Web Vitals
- CLS: Et forkert eller manglende viewport kan få elementer til at reflowe når brugeren zoomer eller når browseren korrigerer skala - særligt hvis du blander faste pixelbredder med “mobil antaget” layout. Det giver små, men målbare layout-skift.
- INP: For små trykområder (knapper, links) fordi siden er zoomet eller skaleret forkert, giver flere fejlklik og oplevet “lag” - især på små skærme.
- LCP: Indirekte via hvilket billede og hvilken display-størrelse der er gældende i layoutet.
Tilgængelighed og lovgivning
Attributter som user-scalable=no eller maximum-scale=1 låser zoom og rammer brugere med nedsat syn - og strider ofte mod WCAG. I offentlige og mange private projekter bør du undgå at deaktivere zoom uden stærk begrundelse og alternativ.
Typiske fejl
- Manglende viewport på nye templates - så ser mobil-preview i CMS fint ud, men rigtige mobiler zoomer ud.
- Kopieret viewport fra gammelt framework med eksperimentelle flag du ikke forstår.
- Forskellige viewports på undersider - giver inkonsistent oplevelse og sværere fejlsøgning.
Relaterede begreber
- CLS, render-blocking
- srcset og sizes, picture-element
- INP - trykområder og interaktion på touch-enheder
FAQ
Hvad er den mest almindelige korrekte viewport?
For de fleste responsive sites: width=device-width, initial-scale=1. Juster kun hvis du har en dokumenteret grund - og test på rigtige enheder.
Kan viewport påvirke LCP?
Indirekte: den styrer hvilket layout og hvilke billedstørrelser der vælges (fx via media queries og sizes). Uden korrekt viewport kan mobil få forkert layout og forkerte ressourcevalg.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Fix CLS: sådan gør du layout stabilt uden hop i indholdet
Lær hvordan du reducerer CLS med faste dimensioner, aspect ratio, stabile embeds og korrekt font loading, så siden ikke hopper under indlæsning.
Undgå CLS fra fonts: font-display, preload og stabile fallbacks
Lær at undgå layout-hop (CLS) fra webfonts med font-display, fallback-strategi og korrekt preload. Guiden er til dig der vil have pæn typografi uden at ødelægge stabilitet.
Optimer cookie banner uden CLS og INP problemer
Lær hvordan du bygger eller justerer cookie bannere, så de ikke skubber indhold, blokerer interaktion eller gør siden tungere end nødvendigt.
Fonts uden CLS: undgå layout hop fra webfonts og fallback fonts
Se hvordan font-display, preload, fallback fonts og font metrics påvirker CLS, og lær hvordan du gør tekst stabil fra første visning.
Cookie banner og Core Web Vitals: den oversete årsag til dårlig brugeroplevelse
Se hvordan cookie bannere og consent scripts kan påvirke load, layout og interaktion, og lær hvordan du undgår at de ødelægger brugeroplevelsen.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
