Skärmstorlek-detektor
Ta reda på viewport-storlek, skärmupplösning, enhetspixelkvot och orientering för din enhet. Gratis, 100% i din webbläsare.
Referens
Viewport vs skärmupplösning — vad är skillnaden?
Viewport är det synliga området av en webbsida i webbläsarfönstret, mätt i CSS-pixlar (window.innerWidth × window.innerHeight). Det ändras när du ändrar storlek på webbläsaren eller öppnar DevTools. Skärmupplösning är det totala antalet pixlar på din fysiska skärm (screen.width × screen.height) — detta bestäms av din hårdvara och skärminställningar. För responsiv webbdesign är det viewporten som spelar roll — den bestämmer vilka CSS media queries och brytpunkter som är aktiva.
Vad är enhetspixelkvot (DPR)?
Enhetspixelkvoten (DPR) anger hur många fysiska (hårdvaru-) pixlar som mappas till en CSS-pixel. En DPR på 1 betyder 1:1-mappning (standardskärmar). En DPR på 2 betyder en Retina/HiDPI-skärm — varje CSS-pixel renderas med 4 fysiska pixlar (2×2), vilket ger skarpare text och bilder. En DPR på 3 är vanlig på avancerade smartphones. Detta spelar roll för: att leverera @2x/@3x-bilder till skärmar med hög DPR, förstå varför skärmdumpar på Retina-skärmar är dubbelt så stora som förväntat, och felsöka layoutproblem som bara uppstår vid specifika DPR-värden.
Användningsområden för skärmdetektering
Responsiv designtestning — verifiera att CSS-brytpunkter triggar vid korrekta viewport-bredder utan att öppna DevTools. Buggrapporter — dela exakta viewport-dimensioner, skärmupplösning och DPR när du rapporterar visningsproblem till utvecklare. Skärmdumpsplanering — känn till exakta dimensioner innan du tar skärmdumpar för dokumentation eller appbutiks-listor. Annons- & bannerstorlek — verifiera att viewport-dimensioner matchar krävda annonsplatsstorlekar för displayannonsering.
Integritet
Skärmdimensioner läses lokalt från dina webbläsar-API:er. Inga data skickas till någon server.