Så här använder du det

Öppna sidan. Värdena läses av direkt från din webbläsare.
Ändra fönsterstorleken eller rotera enheten för att se viewportstorleken och orienteringen uppdateras.
Använd ”Kopiera alla” för att klistra in detaljerna i en felrapport eller supportförfrågan.

Så fungerar det

Webbläsare rapporterar storlekar i CSS-pixlar, den enhet webbsidor använder för layout. På högupplösta skärmar ritas en CSS-pixel med flera fysiska pixlar: enhetspixelförhållandet (DPR) anger hur många. En telefon som rapporterar 390 × 844 med DPR 3 har en panel på cirka 1170 × 2532 enhetspixlar. På datorer ändrar både webbläsarens zoom och operativsystemets skärmskalning DPR och CSS-storleken, så en skärm på 2560 × 1440 vid 125 % skalning rapporterar 2048 × 1152.

Skärmupplösningen är hela skärmen; det tillgängliga utrymmet exkluderar permanenta fält i operativsystemet som aktivitetsfältet i Windows eller menyraden i macOS; visningsområdet (viewport) är den del av webbläsarfönstret där sidan visas, utan verktygsfält men inklusive eventuell rullningslist. Viewporten är vad CSS-medieförfrågningar som min-width: 768px svarar på, så det är värdet att kontrollera när du testar responsiva layouter.

Färgschemat och värdena för reducerad rörelse kommer från samma CSS-mediefunktioner som webbplatser använder för att anpassa sig till dina systeminställningar. Märken, plattform och mobil kommer från User-Agent Client Hints, vilket endast Chromium-baserade webbläsare tillhandahåller. Vissa webbläsare avrundar eller fixerar dessa värden medvetet för att minska fingeravtryck, så de kanske inte exakt matchar din hårdvara.

Exempel

Testa en responsiv layout

En layout går sönder på en kollegas dator. De kopierar detaljerna, som visar ett visningsområde på 1280 × 649 vid DPR 1,5. Ställ in webbläsarens enhetsverktygsfält på samma visningsområde för att återskapa problemet.

Välja bildstorlekar

En produktbild visas 400 CSS-pixlar bred. På en telefon med DPR 3 behöver den 1200 pixlar för att se skarp ut, vilket talar om vilka storlekar du ska ta med i srcset.

Kontrollera skärmskalning

En skärm på 3840 × 2160 rapporterar 2560 × 1440 med DPR 1,5: Windows skalar skärmen med 150 %.

Vanliga frågor

Varför skiljer sig skärmupplösningen från min bildskärms specifikation?

Webbläsare rapporterar CSS-pixlar, det vill säga de fysiska pixlarna dividerade med skalfaktorn. Multiplicera med device pixel ratio för att komma nära hårdvaruupplösningen. Webbläsarens zoom ändrar också det rapporterade värdet.

Vad är skillnaden mellan skärmstorlek och viewportstorlek?

Skärmstorleken är hela bildskärmen. Viewporten är bara det område inuti webbläsarfönstret där sidan ritas, så den är mindre och ändras när du ändrar fönsterstorleken eller öppnar utvecklarverktyg.

Används den här informationen för att spåra mig?

Inte av den här sidan: värdena visas bara för dig och lagras eller skickas inte någonstans. Webbplatser kan läsa samma värden, vilket är anledningen till att vissa webbläsare avrundar dem för att försvåra fingeravtryck.

Varför visas stöd för pekskärm på min bärbara dator?

Pekskärmsstöd baseras på antalet beröringspunkter som webbläsaren rapporterar. Bärbara datorer med pekskärm rapporterar dem även om du främst använder en mus, och vissa drivrutiner eller fjärrskrivbordslösningar rapporterar pekskärmsstöd utan att det finns en pekskärm.

Integritet

Alla värden läses av JavaScript i din webbläsare och visas bara för dig. Ingenting sparas, laddas upp eller ingår i analys; endast en anonym händelse om att verktyget öppnades och användes registreras.