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.
Viewport-tagget er et <meta>-element der placeres i sidens <head> og instruerer mobile browsere om hvordan siden skal skaleres. Uden viewport-tagget viser mobil-browsere siden som en zoomed-ud desktop-version med ulæselig tekst — en klassisk mobil-SEO-fejl der rapporteres af Google Search Console. For SEO er tagget direkte relevant fordi Google bruger mobile-first indexing og vurderer siden primært som mobilbruger: manglende viewport-tag signalerer direkte at siden ikke er mobil-optimeret.
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. width=device-width sætter viewport-bredden til enhedens faktiske skærmbredde — en iPhone 14 Pro har en skærmbredde på 393 CSS-pixels, så viewport sættes til 393px i stedet for at zoome en 1200px-bred side ind. initial-scale=1 starter med en zoom-faktor på 1, så 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 og user-scalable — undgå disse parametre
maximum-scale=1 og user-scalable=no 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 er afhængige af zoom, WCAG 2.1 kræver at zoom ikke er deaktiveret, og nyere iOS-versioner ignorerer user-scalable=no af tilgængelighedshensyn. Brug aldrig user-scalable=no — det er en tilgængeligheds- og SEO-fejl.
initial-scale=1, maximum-scale=5 er acceptabelt — det tillader zoom op til 5x.
Viewport-enheder i CSS
Viewport-tagget definerer ikke bare mobilvisning — det introducerer også viewport-relative CSS-enheder. vw er en procentdel af viewport-bredden (100vw = fuld bredde), og vh er en procentdel af viewport-højden (100vh = fuld højde). vmin tager den mindste af vw og vh, nyttigt til elementer der altid skal passe i viewport. Den nyere enhed dvh (dynamic viewport height) 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. Under mobile-first indexing bruger Google Smartphone Googlebot til at crawle — uden korrekt viewport-tag vurderer Google siden som mobiluvenlig. Search Console rapporterer specifikt om manglende eller forkert konfigurerede viewport-tags under Oplevelse → Mobilanvendelighed. Endelig er viewport-tagget 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. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.
Andre artikler i samme emne
- Canonical tag — rel=canonical og duplicate content
- Hreflang — Sprogsignaler til internationale sider
- Meta tags — Title, description og alle vigtige meta-elementer
- Open Graph tags — Styring af sociale deling
- Pagination — Håndtering af sideinddeling og SEO
- Robots directives — Styring af crawling og indeksering
Ofte stillede spørgsmål
- Hvad er viewport tag?
- Viewport tag er et meta-element der placeres i sidens <head> og instruerer mobil-browsere om hvordan siden skal skaleres og vises. Den standard anbefaling er <meta name=viewport content=width=device-width, initial-scale=1.0>. Width=device-width angiver at siden skal skaleres til enhedens skærmbredde. Initial-scale=1.0 sætter den initiale zoomniveau til 100%. Uden viewport-tagget viser mobil-browsere siden i desktop-bredde og zoomer ud, så tekst bliver ulæselig.
- Hvad har viewport tag med SEO at gøre?
- Viewport tag er direkte SEO-relevant fordi Google bruger mobile-first indexing — Googles primære vurdering af en side er baseret på mobilversionen. Manglende viewport-tag giver dårlig mobil brugeroplevelse og signalerer til Google at siden ikke er mobil-optimeret. Det kan skade ranking, særligt for mobile søgninger. Viewport-tagget er desuden forudsætning for at responsivt CSS-design fungerer korrekt på mobilenheder.
- Hvad er forskellen på viewport tag og responsivt design?
- Viewport-tagget er en enkelt HTML-linje der instruerer browseren om at skalere siden korrekt til mobilskærmen — det er en forudsætning. Responsivt design er den bredere CSS-strategi der sikrer at layout, tekst og billeder tilpasser sig alle skærmstørrelser via media queries. Viewport-tagget er nødvendigt for at responsivt design fungerer: uden det ignorerer mobil-browsere media queries og viser desktop-layoutet. Du har brug for begge dele.
- Kan viewport-indstillinger skade tilgængelighed?
- Ja — user-scalable=no og maximum-scale=1 forhindrer brugere i at zoome, hvilket er kritisk for svagsynede. WCAG 2.1 kræver at brugere kan zoome op til 200% uden tab af indhold eller funktionalitet. Google vurderer tilgængelighed positivt i sine kvalitetsvurderinger, og iOS ignorerer i stigende grad user-scalable=no af tilgængeligheds-hensyn. Brug aldrig disse parametre — de skader brugere uden at give reel fordel.
- Hvad er dvh-enheden og hvornår bruges den frem for vh?
- dvh (dynamic viewport height) er en nyere CSS-enhed der tager højde for at mobile browsere dynamisk ændrer størrelse på adressebjælken ved scroll — den forsvinder og dukker op igen, hvilket ændrer den tilgængelige skærmhøjde. 100vh kan resultere i at indhold skjules bag adressebjælken. 100dvh bruger den aktuelle synlige viewport-højde og er den foretrukne enhed til hero-sektioner og fuld-skærms-layouts på mobile enheder. Browserunderstøttelse er god i alle moderne browsere fra 2022.
Placering i ordbogen
- Canonical tag — rel=canonical og duplicate content
- Hreflang — Sprogsignaler til internationale sider
- Meta tags — Title, description og alle vigtige meta-elementer
- Open Graph tags — Styring af sociale deling
- Pagination — Håndtering af sideinddeling og SEO
- Robots directives — Styring af crawling og indeksering