Viewport-metataggen
Legg til viewport-metataggen, og forstå hvorfor den er nødvendig for at responsive layouter skal fungere riktig på mobile enheter.
Viewport-metataggen er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hvorfor viewport-metatagen?
Uten viewport-metatagen gjengir mobilnettlesere siden med en skrivebordsbredde (ofte 980px) og zoomer ut for å få plass. Dette gjør teksten liten og layoutene ødelagte. Metatagen forteller nettleseren at den skal bruke enhetens faktiske bredde.
Taggen
Legg dette til i <head> på hver side. Det er nødvendig for at responsivt design skal fungere riktig.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width
width=device-width setter viewport-bredden til enhetens skjermbredde i CSS-piksler. På en iPhone 14 (390px bred) gjør dette viewporten 390px, ikke 980px.
initial-scale=1.0
initial-scale=1.0 setter zoomnivået til 1 når siden lastes inn første gang. Uten dette kan enkelte nettlesere fortsatt bruke en zoomfaktor. Sammen med device-width gir dette et ekte 1:1-forhold mellom CSS-piksler og enhetspiksler.
CSS-piksler kontra fysiske piksler
Skjermer med høy DPI (Retina) har et enhetens pikselforhold (DPR) som er større enn 1. En iPhone 14 som er 390px bred, har 1170 fysiske piksler (DPR = 3). CSS-piksler abstraherer bort fysiske piksler — CSS-en din fungerer fortsatt med CSS-piksler uavhengig av DPR.
Ikke bruk user-scalable=no
Noen utviklere legger til user-scalable=no for å deaktivere kniping for å zoome. Ikke gjør dette. Det hindrer brukere med synshemminger i å zoome inn for å lese innholdet og bryter med WCAG-suksesskriterium 1.4.4.
Viewport-enheter: vw og vh
1vw = 1 % av viewport-bredden. 1vh = 1 % av viewport-høyden. 100vw og 100vh fyller hele viewporten. Bruk dem for hero-seksjoner og fullskjermslayouter.
.hero {
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}dvh — Dynamisk viewport-høyde
På mobil inkluderer 100vh nettleserens grensesnittelementer (adresselinjen), noe som kan føre til at innhold kuttes. Den nyere 100dvh (dynamisk viewport-høyde) tilpasser seg de synlige grensesnittelementene. Bruk den med en reserveverdi.
.full-screen {
min-height: 100vh; /* fallback */
min-height: 100dvh; /* modern browsers */
}viewport i DevTools
I Chrome DevTools klikker du på enhetsikonet for å åpne enhetsmodus og se nøyaktig hvordan siden ser ut ved ulike viewport-størrelser. Linjalen viser CSS-piksler.
Varianter av content-attributtet
Du kan også angi initial-scale, minimum-scale og maximum-scale. Hold dem på fornuftige verdier. Hvis du setter minimum-scale=1 uten user-scalable=no, tillater det fortsatt zooming, noe som er den tilgjengelige tilnærmingen.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">Viewport og media queries
Media queries bruker viewport-bredden (CSS-pikselverdien, ikke fysiske piksler). Hvis viewporten er 390px, vil @media (max-width: 768px) gjelde. Viewport-metatagen gjør at disse breakpointene fungerer riktig på mobil.
Hurtigsjekk
Hva er formålet med width=device-width i viewport-metatagen?
Oppsummering: Viewport-metatagen
Ta alltid med i
. Deaktiver aldri brukerskalering. Bruk vw/vh for størrelser relative til viewporten. dvh løser problemer med mobilnettleserens grensesnittelementer. Denne ene taggen gjør at all responsiv CSS fungerer på mobil.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Viewport-metataggen» gratis?
Ja – hele teksten i «Viewport-metataggen» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Viewport-metataggen»?
Legg til viewport-metataggen, og forstå hvorfor den er nødvendig for at responsive layouter skal fungere riktig på mobile enheter. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Viewport-metataggen»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.