Sådan bruger du det

Åbn siden. Værdierne læses straks fra din browser.
Tilpas vinduets størrelse, eller drej din enhed for at se viewportstørrelse og orientering opdatere.
Brug “Kopier alle” til at indsætte detaljerne i en fejlrapport eller supportanmodning.

Sådan fungerer det

Browsere angiver størrelser i CSS-pixels, den enhed, websider bruger til layout. På skærme med høj tæthed tegnes én CSS-pixel med flere fysiske pixels: enhedspixelratioen (DPR) fortæller hvor mange. En telefon, der angiver 390 × 844 med en DPR på 3, har et panel på cirka 1170 × 2532 enhedspixels. På computer ændrer browserzoom og operativsystemets skærmskalering både DPR og CSS-størrelsen, så en skærm på 2560 × 1440 ved 125 % skalering angiver 2048 × 1152.

Skærmopløsningen er hele skærmen; den tilgængelige plads udelukker permanente systembjælker som Windows-proceslinjen eller macOS-menulinjen; viewporten er den del af browservinduet, hvor siden vises, uden værktøjslinjer men inklusive en eventuel scrollbar. Viewporten er det, som CSS-medieforespørgsler såsom min-width: 768px reagerer på, så det er tallet, du skal kontrollere, når du tester responsive layouts.

Farveskemaet og værdierne for reduceret bevægelse kommer fra de samme CSS-mediefunktioner, som websites bruger til at tilpasse sig dine systemindstillinger. Mærker, platform og mobil kommer fra User-Agent Client Hints, som kun Chromium-baserede browsere leverer. Nogle browsere runder eller fastlåser bevidst disse værdier for at mindske fingeraftryk, så de passer måske ikke nøjagtigt til din hardware.

Eksempler

Test af responsivt layout

Et layout går i stykker på en kollegas bærbare computer. De kopierer detaljerne, som viser en viewport på 1280 × 649 med DPR 1,5. Indstil browserens enhedsværktøjslinje til samme viewport for at genskabe problemet.

Valg af billedstørrelser

Et produktbillede vises 400 CSS-pixels bredt. På en telefon med DPR 3 skal det bruge 1200 pixels for at se skarpt ud, hvilket fortæller dig, hvilke størrelser du skal inkludere i srcset.

Kontrol af skærmskalering

En skærm på 3840 × 2160 angiver 2560 × 1440 med DPR 1,5: Windows skalerer skærmen med 150 %.

Ofte stillede spørgsmål

Hvorfor afviger skærmopløsningen fra min skærms specifikation?

Browsere rapporterer CSS-pixels, som er de fysiske pixels divideret med skaleringsfaktoren. Gang med enhedens pixelratio for at komme tæt på hardwareopløsningen. Browserzoom ændrer også den rapporterede værdi.

Hvad er forskellen på skærmstørrelse og viewportstørrelse?

Skærmstørrelsen er hele skærmen. Viewporten er kun området inde i browservinduet, hvor siden tegnes, så den er mindre og ændrer sig, når du ændrer vinduets størrelse eller åbner udviklerværktøjer.

Bliver disse oplysninger brugt til at spore mig?

Ikke af denne side: værdierne vises kun for dig og bliver ikke gemt eller sendt nogen steder. Websteder kan læse de samme værdier, og derfor afrunder nogle browsere dem for at gøre fingeraftryk sværere.

Hvorfor vises touch-understøttelse på min bærbare computer?

Touch-understøttelse er baseret på det antal berøringspunkter, browseren rapporterer. Bærbare computere med touchskærm rapporterer dem, selv hvis du primært bruger mus, og nogle drivere eller fjernskrivebordsopsætninger rapporterer touch-understøttelse uden en touchskærm.

Privatliv

Alle værdier læses af JavaScript i din browser og vises kun for dig. Intet gemmes, uploades eller inkluderes i analyser; der registreres kun en anonym hændelse om, at værktøjet blev åbnet og brugt.