Scherminformatie

DPR is het aantal fysieke pixels per CSS-pixel. Een DPR van 2 duidt op een Retina-scherm, wat betekent dat afbeeldingen 2x groter moeten zijn voor een scherpe weergave.

Schermresolutie is het totale aantal fysieke pixels van je monitor, terwijl de viewport het gebied is waarin content in de browser wordt weergegeven, exclusief werkbalken en scrollbalken.

Breekpunten vastpinnen op specifieke apparaatnamen garandeert dat ze sneuvelen zodra er een nieuw toestel verschijnt. Knip liever daar waar de lay-out zelf scheef begint te lopen. In de praktijk zijn 480, 768, 1024 en 1280 px gangbare startpunten, maar dat zijn makkelijk te onthouden getallen, geen regels. Versmal het browservenster langzaam en let op de breedte waarop tekstregels te lang worden of een kaart platgedrukt raakt; het breekpunt daar plaatsen houdt veel langer stand.

Omdat een CSS-pixel een eenheid van waargenomen grootte is en geen fysieke punt. Op een 4K-scherm met 200% schaling worden 3840 fysieke punten weergegeven als 1920 CSS-pixels, en juist dat maakt tekst en pictogrammen dichter en scherper. De pixelverhouding van het apparaat is dan 2, dus om afbeeldingen scherp te houden moet je via srcset een bestand van twee keer de weergavegrootte meeleveren.