Schermgrootte Detector

Referentie

Viewport vs schermresolutie — wat is het verschil?

Viewport is het zichtbare gebied van een webpagina in het browservenster, gemeten in CSS-pixels (window.innerWidth × window.innerHeight). Het verandert wanneer u de browser verkleint of vergroot of DevTools opent. Schermresolutie is het totale pixelaantal van uw fysieke beeldscherm (screen.width × screen.height) — dit wordt bepaald door uw hardware en beeldscherminstellingen. Voor responsief webontwerp is de viewport wat telt — het bepaalt welke CSS-mediaquery's en breekpunten actief zijn.

Wat is apparaatpixelverhouding (DPR)?

De apparaatpixelverhouding (DPR) vertelt u hoeveel fysieke (hardware) pixels worden toegewezen aan één CSS-pixel. Een DPR van 1 betekent 1:1-mapping (standaard beeldschermen). Een DPR van 2 betekent een Retina/HiDPI-display — elke CSS-pixel wordt weergegeven met 4 fysieke pixels (2×2), wat scherpere tekst en afbeeldingen oplevert. Een DPR van 3 komt veel voor op high-end smartphones. Dit is belangrijk voor: het aanbieden van @2x/@3x afbeeldingen aan hoge-DPR-schermen, begrijpen waarom screenshots op Retina-displays twee keer de verwachte resolutie hebben, en het debuggen van lay-outproblemen die alleen bij specifieke DPR-waarden optreden.

Toepassingen voor schermdetectie

Responsief ontwerp testen — controleer of CSS-breekpunten op de juiste viewportbreedtes activeren zonder DevTools te openen. Bugrapporten — deel exacte viewportafmetingen, schermresolutie en DPR bij het melden van weergaveproblemen aan ontwikkelaars. Screenshot-planning — ken de exacte afmetingen voordat u screenshots maakt voor documentatie of app-store-vermeldingen. Advertentie- & bannerformaten — controleer of viewportafmetingen overeenkomen met de vereiste advertentieplaatsformaten voor display-advertenties.

Privacy

Schermafmetingen worden lokaal uit uw browser-API's gelezen. Er worden geen gegevens naar een server gestuurd.