Wat is mijn schermresolutie?
Zie direct uw schermresolutie, browservenstergrootte, pixeldichtheid, kleurdiepte en touchondersteuning — met kopiëren in één klik.
1.061 weergaven
Wijzig de venstergrootte — de viewportwaarden worden live bijgewerkt.
Wat "apparaatpixelverhouding" eigenlijk meet
Elk scherm heeft een vast raster van fysieke pixels — de native resolutie — maar webpagina's worden opgemaakt in CSS-pixels, een resolutie-onafhankelijke eenheid. De apparaatpixelverhouding (device pixel ratio, DPR) is de omrekeningsfactor daartussen: met hoeveel fysieke pixels één enkele CSS-pixel wordt getekend. Op een scherm met standaarddichtheid is de DPR 1 en komen de twee één-op-één overeen. Op een "Retina"- of high-DPI-scherm is de DPR doorgaans 2 of 3, wat betekent dat één CSS-pixel eigenlijk wordt weergegeven over een blok van 2×2 (4 fysieke pixels) of 3×3 (9 fysieke pixels). Daarom zien tekst en iconen er op die schermen merkbaar scherper uit: het besturingssysteem en de browser hebben vier of negen keer zoveel fysieke stippen beschikbaar om dezelfde logische pixel te tekenen, zodat curven en randen minder grof hoeven te worden benaderd.
Deze pagina leest dat getal, samen met alles wat verder op de kaart hierboven staat, rechtstreeks uit echte browser-API's: window.screen rapporteert de native breedte, hoogte en kleurdiepte van het scherm, terwijl window.devicePixelRatio de CSS-naar-fysieke-pixelverhouding rapporteert. De metingen van het browservenster komen van window.innerWidth/innerHeight, en dat is waarom dat getal kleiner is dan de schermresolutie — het sluit de ruimte uit die wordt ingenomen door tabbladen, de adresbalk en vensterranden. Wijzig de venstergrootte en die cijfers worden live bijgewerkt, omdat ze rechtstreeks uit de browser worden gelezen, niet uit een cache.
Waar dit van pas komt
Typische toepassingen omvatten: uw exacte configuratie beschrijven aan technische ondersteuning zonder naar getallen te gokken, controleren met welke pixelafmetingen een responsief ontwerp daadwerkelijk moet werken op uw apparaat, bevestigen dat een nieuw aangesloten monitor zijn native resolutie heeft onderhandeld in plaats van een lagere terugvalmodus, of verifiëren dat een televisie die als tweede scherm is aangesloten het juiste signaal heeft opgepikt. De knop voor kopiëren met één klik haalt een nette tekstsamenvatting van elke waarde op, klaar om rechtstreeks in een supportticket of bugrapport te plakken.
Kleurdiepte, ook getoond op de kaart, werkt volgens een vergelijkbaar per-kanaal principe als pixelverhouding: een typisch 24-bits scherm wijst 8 bits toe aan elk van rood, groen en blauw, wat ongeveer 16,7 miljoen mogelijke kleuren per pixel oplevert, terwijl sommige professionele en HDR-schermen een diepte van 30 of 36 bits rapporteren voor fijnere kleurovergangen. Oriëntatie (staand of liggend) en touchondersteuning maken het plaatje compleet, beide live gelezen uit dezelfde window.screen- en navigator-interfaces in plaats van geraden op basis van schermafmetingen of user-agent-detectie.
Veelgestelde vragen
Waarom is mijn browservenster kleiner dan mijn schermresolutie?
De viewport is alleen het interne tekengebied van de browser — tabbladen, de adresbalk, de bladwijzerbalk en de vensterrand nemen elk hun eigen deel van het scherm in. Volledig scherm verwijdert het grootste deel van die overhead, waardoor de twee getallen dichter bij elkaar komen.
Wat betekent de apparaatpixelverhouding in de praktijk?
Het geeft aan hoeveel fysieke pixels één CSS-pixel voorstellen. Een verhouding van 2 betekent dat een pagina die in CSS "1000 px" breed is, in werkelijkheid wordt getekend met 2000 fysieke pixels over de breedte — die oversampling is wat tekst en iconen scherp laat lijken op schermen van Retina-klasse.
Waarom komt de gerapporteerde resolutie niet overeen met de specificaties van mijn monitor?
Dat komt door schaling van het besturingssysteem. Bij 150% schaling rapporteert bijvoorbeeld een fysiek 2880 pixels breed paneel 1920 logische pixels aan webpagina's. Het paneel gebruikt nog steeds elke fysieke pixel die het heeft — het besturingssysteem tekent alles gewoon groter om tekst leesbaar te houden.
Zijn window.screen en window.devicePixelRatio betrouwbaar in verschillende browsers?
Ja — het zijn standaard, al lang ondersteunde browser-API's, hoewel window.screen het volledige fysieke scherm weerspiegelt terwijl de viewportwaarden alleen het huidige browservenster weerspiegelen, dus dat de twee getallen verschillende vragen beantwoorden is te verwachten, geen bug.
Kan deze tool detecteren of mijn scherm aanraakinvoer ondersteunt?
Ja — hij controleert op aanraakgeschikte invoer via de ondersteuning van pointer- en touch-events van de browser, en zo kan de kaart naast de resolutie en kleurdiepte ook rapporteren of uw huidige scherm aanraakgeschikt is.
Vergelijkbare tools
Probleem melden
Wat is mijn schermresolutie?
Reacties
Nog geen reacties — schrijf de eerste!