Zo gebruik je deze tool

Open de pagina. De waarden worden meteen uit uw browser uitgelezen.
Maak het venster groter of kleiner, of draai uw apparaat om te zien hoe de viewportgrootte en de oriëntatie veranderen.
Gebruik ‘Alles kopiëren’ om de gegevens in een bugrapport of supportverzoek te plakken.

Hoe het werkt

Browsers geven afmetingen op in CSS-pixels, de eenheid die webpagina’s gebruiken voor de lay-out. Op schermen met een hoge pixeldichtheid wordt één CSS-pixel met meerdere fysieke pixels weergegeven: de device pixel ratio (DPR) geeft aan hoeveel. Een telefoon die 390 × 844 aangeeft met een DPR van 3 heeft een scherm met ongeveer 1170 × 2532 apparaatpixels. Op desktop veranderen zowel de browserzoom als de schermschaal van het besturingssysteem de DPR en de CSS-afmetingen. Een monitor van 2560 × 1440 geeft bij een schaal van 125 % dus 2048 × 1152 aan.

De schermresolutie geldt voor het hele scherm; de beschikbare ruimte sluit vaste balken van het besturingssysteem uit, zoals de Windows-taakbalk of de macOS-menubalk. De viewport is het deel van het browservenster waarin de pagina wordt weergegeven, zonder de werkbalken maar inclusief een eventuele schuifbalk. CSS-mediaquery’s zoals min-width: 768px reageren op de viewport. Dat is dus de afmeting die u controleert bij het testen van responsieve lay-outs.

Het kleurenschema en de voorkeur voor minder beweging komen van dezelfde CSS-mediafuncties die websites gebruiken om zich aan uw systeeminstellingen aan te passen. Merken, platform en mobiel zijn afkomstig van User-Agent Client Hints, die alleen beschikbaar zijn in op Chromium gebaseerde browsers. Sommige browsers ronden deze waarden bewust af of stellen ze vast om fingerprinting te bemoeilijken. Daardoor komen ze mogelijk niet precies overeen met uw hardware.

Voorbeelden

Een responsieve lay-out testen

Een lay-out werkt niet goed op de laptop van een collega. Die kopieert de gegevens, waaruit een viewport van 1280 × 649 bij DPR 1.5 blijkt. Stel de apparaatwerkbalk van uw browser in op dezelfde viewport om het probleem te reproduceren.

Afbeeldingsformaten kiezen

Een productafbeelding wordt 400 CSS-pixels breed weergegeven. Op een telefoon met DPR 3 zijn 1200 pixels nodig voor een scherpe weergave. Zo weet u welke afmetingen u in srcset moet opnemen.

De schaal van een monitor controleren

Een monitor van 3840 × 2160 geeft 2560 × 1440 aan bij DPR 1.5: Windows schaalt het scherm met 150 %.

Veelgestelde vragen

Waarom wijkt de schermresolutie af van de specificaties van mijn monitor?

Browsers geven CSS-pixels op. Dit zijn fysieke pixels gedeeld door de schaalfactor. Vermenigvuldig dit met de device pixel ratio voor een benadering van de hardware-resolutie. Ook browserzoom verandert de weergegeven waarde.

Wat is het verschil tussen schermgrootte en viewportgrootte?

De schermgrootte betreft het hele scherm. De viewport is alleen het gebied binnen het browservenster waarin de pagina wordt weergegeven. Die is dus kleiner en verandert wanneer u het venster groter of kleiner maakt of ontwikkelaarstools opent.

Wordt deze informatie gebruikt om mij te volgen?

Niet door deze pagina: de waarden worden alleen aan u getoond en worden nergens opgeslagen of naartoe verzonden. Websites kunnen dezelfde waarden uitlezen. Daarom ronden sommige browsers ze af om fingerprinting moeilijker te maken.

Waarom wordt touchondersteuning op mijn laptop weergegeven?

Touchondersteuning is gebaseerd op het aantal aanraakpunten dat de browser meldt. Laptops met een touchscreen melden dit ook als u meestal een muis gebruikt. Sommige stuurprogramma’s of configuraties voor extern bureaublad melden touchondersteuning zonder touchscreen.

Privacy

Alle waarden worden met JavaScript in uw browser uitgelezen en alleen aan u getoond. Er wordt niets opgeslagen, geüpload of opgenomen in analytics. Alleen een anonieme gebeurtenis die registreert dat de tool is geopend en gebruikt, wordt vastgelegd.