Mystisk Skriftstørrelse: 80% på Mobil?

26/02/2023

★★★★★Rating: 4.9 (11343 votes)

Det er en klassisk hovedpine for webudviklere: Du har omhyggeligt sat din skriftstørrelse til 80% for at sikre konsistens, og det ser perfekt ud på din computer. Men når du tjekker det på en mobil enhed, er den samme tekst pludselig ekstremt lille, nærmest umulig at læse. Dette fænomen er ikke et tilfælde af tilfældighed eller en fejl i din kode, men derimod et resultat af, hvordan browsere fortolker relative CSS-enheder og håndterer visningsporte på tværs af forskellige enheder. Lad os dykke ned i den tekniske forklaring og finde ud af, hvordan du kan løse dette frustrerende problem én gang for alle.

Is the text in the footer 80% font-size? — The text in the footer has also 80% font-size, and if I test it on my PC it is equal, but if I test it in a mobile device, the text of the footer is extremely small, impossible to be read. How is this possible? Which is the explanation and how can this be avoided? test text

Din observation er helt korrekt og meget almindelig. Den skriftstørrelse, du har sat til 80% for både din hovedtekst og din fodtekst, er en relativ enhed. Dette betyder, at dens endelige beregnede pixelværdi afhænger af et andet element – specifikt dens forældre-element. Når du angiver font-size: 80%, betyder det 80% af forældre-elementets egen beregnede skriftstørrelse. Hvis din <p>-blok inde i <div id="mainTextContainer"> og din <div> inde i <div id="cookiesBar"> begge har <body> eller <html> som en indirekte eller direkte forælder, så er det dennes grundskriftstørrelse, der er afgørende for beregningen.

Indholdsfortegnelse

Forståelse af Relative Enheder og Arvelighed
Dybdegående Kendskab til Skriftstørrelsesenheder
- 1. Absolute Enheder
- 2. Relative Enheder
Løsninger og Bedste Praksis
Ofte Stillede Spørgsmål

Forståelse af Relative Enheder og Arvelighed

Problemet opstår, fordi den grundlæggende skriftstørrelse, som dine 80% er baseret på, kan variere mellem desktop- og mobile browsere. Selvom du ikke eksplicit har sat en font-size på din <body> eller <html>, har browsere en standard skriftstørrelse (typisk 16px). Men mobile browsere har ofte yderligere adfærd, der kan påvirke denne grundstørrelse:

Standard Skriftstørrelser: Forskellige mobile browsere (f.eks. Safari på iOS, Chrome på Android) kan have let forskellige standard skriftstørrelser for rod-elementet (<html>) eller <body>, eller de kan anvende en intern skalering.
Viewport Meta-Taggets Indflydelse: Dette er den mest sandsynlige synder. Hvis din HTML-side mangler et korrekt <meta name="viewport">-tag i <head>-sektionen, vil mobile browsere ofte forsøge at gengive siden, som om den var på en desktop-skærm, og derefter skalere hele siden ned for at passe til mobilskærmen. Dette skalerer alt – inklusive dine skriftstørrelser – hvilket gør dem uhyggeligt små. Uden <meta name="viewport" content="width=device-width, initial-scale=1.0">, kan browseren antage en "virtuel" viewport-bredde på f.eks. 980px, selvom den fysiske skærm kun er 375px bred. Når den derefter skalerer for at passe, bliver alt – inklusive din tekst – meget mindre.
Brugerindstillinger: Mobile enheder giver ofte brugere mulighed for at justere deres foretrukne skriftstørrelse i systemindstillingerne. Dette kan også påvirke den grundlæggende skriftstørrelse, som relative enheder er baseret på.

Forestil dig, at din desktops browser har en standard grundstørrelse på 16px. Så vil 80% af 16px være 12.8px. På din mobil enhed, uden det korrekte viewport-tag, kan browseren effektivt behandle din side, som om dens grundstørrelse kun var 10px (efter skalering). Så vil 80% af 10px være 8px, hvilket er markant mindre og sandsynligvis årsagen til, at din tekst er "ekstremt lille" i fodteksten.

Dybdegående Kendskab til Skriftstørrelsesenheder

For at opnå en forudsigelig og responsiv skriftstørrelse er det vigtigt at forstå de forskellige CSS-enheder, der kan bruges til at definere skriftstørrelser:

1. Absolute Enheder

px (pixels): En absolut enhed, der definerer en fast pixelværdi. Fordelen er præcis kontrol; ulempen er, at den ikke er responsiv og kan ignorere brugerens tilgængelighedsindstillinger (som f.eks. forstørret tekst). Hvis du bruger px, vil teksten altid have den samme størrelse, uanset skærmstørrelse eller brugerindstillinger, hvilket sjældent er ideelt for responsivt design.

2. Relative Enheder

% (procent): Som vi har set, er dette relativt til forældre-elementets skriftstørrelse. Nemt at bruge, men kan føre til uforudsigelige resultater på grund af arvelighedskaskaden.
em: Relativ til forældre-elementets skriftstørrelse. Hvis et forældre-element har font-size: 20px;, vil 1em i et barn-element være 20px. Hvis det barn-element så har et eget barn med font-size: 0.8em;, vil denne størrelse være 0.8 * 20px = 16px. Dette kan gøre det vanskeligt at styre skriftstørrelser over flere niveauer af indlejring, da effekten kan akkumulere eller formindskes.
rem (root em): Relativ til rod-elementets (<html>) skriftstørrelse. Dette er en game-changer for responsivt design. Uanset hvor dybt et element er indlejret, vil 1rem altid referere til skriftstørrelsen defineret på <html>-elementet. Dette eliminerer problemer med akkumulerende effekter og gør det meget lettere at opretholde en ensartet skalering på tværs af hele din side.
vw (viewport width): Relativ til bredden af visningsporten (browserens vindue). F.eks. vil 1vw være 1% af visningsportens bredde. Dette kan være effektivt til at skalere tekst proportionelt med skærmstørrelsen, men det kan også medføre, at teksten bliver ekstremt lille på meget smalle skærme eller for stor på meget brede skærme, medmindre det kombineres med min(), max() eller clamp() CSS-funktioner.

Her er en sammenlignende tabel over de mest almindelige skriftstørrelsesenheder:

Enhed	Beskrivelse	Fordele	Ulemper
`px`	Absolut pixelværdi	Præcis kontrol, nem at forstå	Ikke responsiv, ignorerer brugerens tilgængelighedsindstillinger
`em`	Relativ til forældre-elementets skriftstørrelse	Responsiv, god til komponent-specifik skalering	Kan være uforudsigelig pga. arvelighed, svær at styre i dybe strukturer
`rem`	Relativ til rod-elementets (HTML) skriftstørrelse	Meget forudsigelig, god til overordnet skalering, respekterer brugerens indstillinger	Kræver en veldefineret rodstørrelse
`%`	Relativ til forældre-elementets skriftstørrelse	Simpel, ligner `em` i adfærd	Samme ulemper som `em`
`vw`	Relativ til visningsportens bredde	Skalerer perfekt med skærmbredde	Kan blive for lille/stor uden kontrol (`min()`/`max()`/`clamp()`)

Løsninger og Bedste Praksis

For at undgå problemet med skriftstørrelser, der krymper på mobil, og for at sikre en robust og responsiv løsning, skal du følge disse trin:

1. Inkluder Viewport Meta-Tagget

Dette er absolut afgørende for enhver responsiv hjemmeside. Tilføj følgende linje i <head>-sektionen af dit HTML-dokument:

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

Dette tag fortæller mobilbrowsere, at de skal indstille visningsportens bredde til enhedens faktiske bredde i CSS-pixels (width=device-width) og at sætte den oprindelige zoom til 1:1 (initial-scale=1.0). Dette forhindrer browseren i at skalere siden ned og sikrer, at dine relative enheder opfører sig som forventet.

2. Brug rem til Skriftstørrelser

rem-enheden er den foretrukne metode til at definere skriftstørrelser i moderne responsivt design. Ved at bruge rem sikrer du, at alle skriftstørrelser er baseret på én enkelt kilde: skriftstørrelsen på rod-elementet (<html>).

Sådan gør du:

Definer en grundstørrelse på <html>: Du kan enten sætte en absolut pixelværdi eller en procentdel for at gøre det nemmere at regne med. Mange foretrækker at sætte html { font-size: 62.5%; }, da dette gør 1rem lig med 10px (fordi 16px * 62.5% = 10px). Dette gør konvertering fra px til rem meget intuitivt (f.eks. 16px bliver 1.6rem, 12px bliver 1.2rem). Alternativt kan du blot sætte html { font-size: 16px; }, hvilket er browserens standard, og så regne derfra (12.8px bliver 0.8rem).
Brug rem overalt ellers: Anvend rem for alle dine andre skriftstørrelser. For din specifikke situation:

/* I din CSS */html { font-size: 62.5%; /* Gør 1rem = 10px for nemme beregninger. Standard browser font er 16px. */}.text p { font-size: 1.2rem; /* Svarer til 12px (1.2 * 10px) */}.cookiesBar div { font-size: 1.0rem; /* Svarer til 10px (1.0 * 10px) */}.mainTextContainer p { font-size: 1.6rem; /* Svarer til 16px */}.cookiesBar div { font-size: 1.2rem; /* Svarer til 12px */ /* Hvis du ønsker 80% af 16px (12.8px), så brug 1.28rem hvis html er 10px, eller 0.8rem hvis html er 16px */}.cookiesBar div { font-size: 0.8rem; /* Hvis din html { font-size: 16px; } er sat, så svarer dette til 12.8px */ /* Hvis din html { font-size: 62.5%; } (10px) er sat, så svarer dette til 8px */ /* Vælg den base for html, der giver mening for dig, og juster rem-værdierne derefter. */ /* For at opnå 12.8px, hvis html er 10px, skal du bruge 1.28rem */ /* For at opnå 12.8px, hvis html er 16px, skal du bruge 0.8rem */ /* Lad os antage, at du vil have din fodtekst til at være 12px på mobil, uanset hvad. */ /* Hvis html er 16px, så er 12px = 12/16 = 0.75rem */ font-size: 0.75rem; /* 12px hvis html er 16px */}

Dette giver dig fuld kontrol, og teksten vil skalere konsekvent på tværs af alle enheder, da den altid vil være relativ til den samme reference (<html>).

3. Brug Media Queries til Finjustering

Selvom rem giver en god base, kan du stadig ønske at finjustere skriftstørrelserne for specifikke skærmstørrelser ved hjælp af media queries. Dette er især nyttigt, hvis du f.eks. vil have en lidt mindre skriftstørrelse på meget små mobilskærme for at spare plads, eller en større på store desktopskærme.

body { font-size: 1rem; /* Standard base skriftstørrelse, f.eks. 16px hvis html er 16px */}/* Mindre skriftstørrelse på skærme under 768px bredde */@media (max-width: 768px) { body { font-size: 0.9rem; /* Juster base skriftstørrelse for mindre enheder */ } .text p { font-size: 1.4rem; /* F.eks. 1.4rem af den nye base (0.9rem) */ } .cookiesBar div { font-size: 0.7rem; /* F.eks. 0.7rem af den nye base (0.9rem) */ }}

Bemærk, at når du ændrer font-size på <body> inden for en media query, vil alle em- og %-værdier inde i <body> tilpasse sig denne nye base, mens rem-værdier fortsat vil referere til <html>'s skriftstørrelse, medmindre du også ændrer den.

4. Test Grundigt på Rigtige Enheder

Den bedste måde at verificere dine ændringer på er ved at teste på en række forskellige fysiske enheder. Brug "Inspect Element" (udviklerværktøjer) i din desktopbrowser (f.eks. Chrome DevTools' enhedstilstand) til at simulere mobilvisninger, men bekræft altid med rigtige telefoner og tablets, da simuleringer ikke altid er 100% nøjagtige.

Ofte Stillede Spørgsmål

Hvorfor er min tekst lille på mobil, selvom den ser fin ud på computeren?

Dette skyldes sandsynligvis, at mobile browsere enten har en anden standard grundskriftstørrelse, eller mere almindeligt, at de skalerer hele din side ned, fordi du mangler et korrekt <meta name="viewport">-tag. Dine relative skriftstørrelser (som % eller em) bliver så beregnet ud fra denne mindre, skalerede grundstørrelse.

Hvad er forskellen på em og rem?

em er relativ til skriftstørrelsen på dens direkte forældre-element. Dette kan føre til en kaskadeeffekt, hvor skriftstørrelser bliver uforudsigelige, hvis du har mange indlejrede elementer. rem (root em) er derimod altid relativ til skriftstørrelsen på rod-elementet (<html>). Dette gør rem meget mere forudsigelig og nemmere at styre for ensartet skalering på tværs af hele dit website.

Hvordan sikrer jeg ensartet skriftstørrelse på tværs af enheder?

Den bedste praksis er at inkludere <meta name="viewport" content="width=device-width, initial-scale=1.0"> i din HTML og derefter bruge rem-enheder til alle dine skriftstørrelser. Definer en grundskriftstørrelse på dit <html>-element (f.eks. font-size: 16px; eller font-size: 62.5%;) og brug derefter rem for alle andre tekstelementer, som f.eks. p { font-size: 1rem; } eller h2 { font-size: 2rem; }.

Skal jeg bruge px eller rem?

For responsivt design og tilgængelighed anbefales rem stærkt over px for skriftstørrelser. rem respekterer brugerens foretrukne skriftstørrelse i browser- og systemindstillinger, hvilket forbedrer tilgængeligheden. px er en fast, absolut værdi, der ikke skalerer med brugerindstillinger eller enhedens DPI.

Hvad er viewport meta-tagget, og hvorfor er det vigtigt?

<meta name="viewport">-tagget er en HTML-meta-tag, der styrer, hvordan en mobilbrowser viser dit indhold. Uden det vil mobile browsere ofte forsøge at gengive din side, som om den var på en desktop-skærm, og derefter skalere den ned for at passe til mobilskærmen. Dette gør alt, inklusive tekst, meget lille. Ved at bruge width=device-width, initial-scale=1.0 sikrer du, at siden gengives med enhedens faktiske bredde og en 1:1 zoom, hvilket er essentielt for korrekt responsivt design.

Ved at implementere disse strategier vil du ikke kun løse dit nuværende problem med den lille fodtekst på mobil, men også opbygge et mere robust, tilgængeligt og fremtidssikret responsivt design for dit website. Glem alt om at gætte, og omfavn de enheder, der giver dig kontrol og forudsigelighed.

Hvis du vil læse andre artikler, der ligner Mystisk Skriftstørrelse: 80% på Mobil?, kan du besøge kategorien Mobil.