Frontend Academy · Lektion

Meta-taggen viewport

Lägg till meta-taggen viewport och förstå varför den krävs för att responsiva layouter ska fungera korrekt på mobila enheter.

Lektion 1 av 413 steg

Meta-taggen viewport är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Varför viewport-metataggen?

Utan viewport-metataggen renderar mobilwebbläsare sidan med en skrivbordsbredd (ofta 980px) och zoomar ut för att få plats. Det gör texten pytteliten och layouterna trasiga. Metataggen talar om för webbläsaren att använda enhetens faktiska bredd.

Taggen

Lägg till den här inuti <head> på varje sida. Den krävs för att responsiv design ska fungera korrekt.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width

width=device-width anger viewportens bredd till enhetens skärmbredd i CSS-pixlar. På en iPhone 14 (390px bred) blir viewporten 390px, inte 980px.

initial-scale=1.0

initial-scale=1.0 ställer in zoomnivån till 1 när sidan läses in första gången. Utan det kan vissa webbläsare fortfarande tillämpa en zoomfaktor. Tillsammans med device-width ger detta ett verkligt förhållande på 1:1 mellan CSS-pixlar och enhetspixlar.

CSS-pixlar kontra fysiska pixlar

High-DPI-skärmar (Retina) har ett device pixel ratio (DPR) större än 1. En iPhone 14 som är 390px bred har 1170 fysiska pixlar (DPR = 3). CSS-pixlar abstraherar från fysiska pixlar — din CSS fungerar fortfarande i CSS-pixlar oavsett DPR.

Använd inte user-scalable=no

Vissa utvecklare lägger till user-scalable=no för att inaktivera nypzoomning. Gör inte det. Det hindrar användare med synnedsättningar från att zooma in för att läsa innehåll och bryter mot WCAG:s framgångskriterium 1.4.4.

Viewport-enheter: vw och vh

1vw = 1 % av viewportens bredd. 1vh = 1 % av viewportens höjd. 100vw och 100vh fyller hela viewporten. Använd dem för hero-sektioner och helskärmslayouter.

.hero {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

dvh — dynamisk viewporthöjd

På mobiler inkluderar 100vh webbläsarens gränssnitt (adressfältet), vilket kan göra att innehåll kapas. Den nyare 100dvh (dynamisk viewporthöjd) anpassar sig efter det synliga gränssnittet. Använd den tillsammans med en reservlösning.

.full-screen {
  min-height: 100vh;    /* fallback */
  min-height: 100dvh;   /* modern browsers */
}

viewport i DevTools

I Chrome DevTools klickar du på enhetsikonen för att öppna enhetsläget och se exakt hur sidan ser ut vid olika viewportstorlekar. Linjalen visar CSS-pixlar.

Variationer av attributet content

Du kan även ange initial-scale, minimum-scale och maximum-scale. Behåll dem på rimliga värden. Om du anger minimum-scale=1 utan user-scalable=no kan användaren fortfarande zooma, vilket är det tillgängliga tillvägagångssättet.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

Viewport och media queries

Media queries använder viewportens bredd (CSS-pixelvärdet, inte fysiska pixlar). Om viewporten är 390px matchar @media (max-width: 768px). Viewport-metataggen gör att dessa brytpunkter fungerar korrekt på mobiler.

Snabb kontroll

Vad är syftet med width=device-width i viewport-metataggen?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Viewport-metataggen

Inkludera alltid i . Inaktivera aldrig användarens zoomning. Använd vw/vh för viewportrelaterad storlek. dvh löser problem med mobilwebbläsarens gränssnitt. Den här enda taggen gör att all responsiv CSS fungerar på mobiler.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Meta-taggen viewport” gratis?

Ja – hela texten till ”Meta-taggen viewport” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Meta-taggen viewport”?

Lägg till meta-taggen viewport och förstå varför den krävs för att responsiva layouter ska fungera korrekt på mobila enheter. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Meta-taggen viewport”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Frontend Academy