Viewport tag — Meta viewport og mobil-rendering
Meta viewport er den ene kodelinje der gør din side mobil-venlig — uden den zoomer browsere ud og siden vises som desktop-version.
Hvad er viewport?
Viewport er det synlige areal af en webside i brugerens browser. På en desktop-browser er viewport typisk det fulde browservindue eksklusive browsertoolbars. På en mobilenhed er viewport skærmens synlige areal.
Problemet der opstod med mobile browsere: tidlige smartphones forsøgte at vise desktop-sider ved at zoome helt ud og vise hele siden som et lille billede. Det var ubrugelig — teksten var ulæselig, og brugere skulle zoome ind manuelt for at læse noget.
Meta viewport-tagget løser dette problem.
Meta viewport-tagget
Meta viewport-tagget placeres i <head> og er den primære instruktion til mobil-browsere om, hvordan siden skal skaleres:
<meta name="viewport" content="width=device-width, initial-scale=1">Dette er den standardformulering alle moderne websites bør have. Den fortæller browseren:
width=device-width — Sæt viewport-bredden til enhedens faktiske skærmbredde. En iPhone 14 Pro har en skærmbredde på 393 CSS-pixels — viewport sættes til 393px i stedet for at zoome en 1200px-bred side ind.
initial-scale=1 — Start med en zoom-faktor på 1 (ingen zoom). Siden vises i sin naturlige størrelse uden ind- eller udzoomning.
Hvad sker der uden viewport-tag?
Uden viewport-tagget viser mobile browsere typisk siden som om viewport er 980px bred (Safaris historiske standard) eller bredere, og zoomer derefter ud for at få det til at passe på skærmen.
Resultatet:
- Teksten er ulæselig (for lille)
- Knapper og links er for tæt på hinanden til touch
- Brugere skal pinch-zoome for at bruge siden
- Googles mobiltest rapporterer “manglende viewport-tag” som fejl
Google rapporterer sider uden viewport-tag som mobilproblemer i Search Console, og det er en direkte rankingpåvirkning under mobile-first indexing.
Yderligere viewport-parametre
maximum-scale=1 og user-scalable=no
Disse parametre forhindrer brugere i at zoome manuelt. De bruges undertiden af udviklere der ønsker fuld kontrol over layout, men de er dårlig praksis og problematisk for tilgængelighed:
- Blinde og svagsynede brugere bruger zoom
- WCAG 2.1 kræver at zoom ikke er deaktiveret
- Nyere iOS-versioner ignorerer
user-scalable=noaf tilgængelighedshensyn
Brug aldrig user-scalable=no — det er en tilgængeligheds- og SEO-fejl.
initial-scale=1, maximum-scale=5 er acceptabelt — tillader zoom op til 5x.
Viewport-enheder i CSS
Viewport-tagget definerer ikke bare mobilvisning — det introducerer også viewport-relative CSS-enheder:
vw — Procentdel af viewport-bredde. 100vw = fuld viewport-bredde.
vh — Procentdel af viewport-højde. 100vh = fuld viewport-højde.
vmin — Den mindste af vw og vh. Nyttigt til elementer der altid skal passe i viewport.
dvh — Dynamic viewport height (ny enhed). Tager højde for at mobile browsere skifter adressebjælke-størrelse ved scroll — 100dvh er den faktisk synlige viewport-højde.
/* Hero-sektion der fylder hele skærmen */
.hero {
height: 100dvh; /* Foretrukket på mobil */
width: 100vw;
}Viewport og SEO
For SEO er viewport-tagget fundamentalt af tre grunde:
Mobil-first indexing: Google bruger Smartphone Googlebot til at crawle. Uden korrekt viewport-tag vurderer Google siden som mobiluvenlig.
Mobile Usability-rapporten: Google Search Console rapporterer specifikt om manglende eller forkert konfigurerede viewport-tags under Oplevelse → Mobilanvendelighed.
Core Web Vitals: Viewport-tagget er en forudsætning for korrekt responsivt design, der igen er en forudsætning for gode CLS-scores (et layout der hopper og ændrer sig passer ikke med mobil viewport).
Tjek ditt viewport-tag
I Chrome DevTools: Åbn Elements-fanen og se <head> for <meta name="viewport">.
Alternativt: Google Search Console’s mobilanvendelighedsrapport og PageSpeed Insights viser begge om viewport-tagget mangler eller er forkert konfigureret.
Kan jeg bruge andre viewport-indstillinger end width=device-width?
Ja, men width=device-width, initial-scale=1 er den universelle standard. Andre indstillinger risikerer at skabe mobilvisningsproblemer.
Påvirker viewport-tagget desktopbrugere?
Nej. Viewport-tagget aktiveres primært på mobile enheder. Desktop-browsere ignorerer typisk width=device-width da de allerede viser siden i fuld bredde.
Er viewport-tagget det samme som meta responsive?
Der er ingen “meta responsive” tag. Det korrekte tag hedder <meta name="viewport">. Responsivt design opnås via kombinationen af viewport-tagget og responsive CSS.
Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog.