Slik bruker du det

Åpne siden. Verdiene leses fra nettleseren din umiddelbart.
Endre størrelsen på vinduet eller roter enheten for å se at størrelsen på visningsområdet og retningen oppdateres.
Bruk «Kopier alt» for å lime inn detaljene i en feilrapport eller en støtteforespørsel.

Slik fungerer det

Nettlesere rapporterer størrelser i CSS-piksler, enheten nettsider bruker til layout. På skjermer med høy tetthet tegnes én CSS-piksel med flere fysiske piksler: enhetens pikselforhold (DPR) forteller hvor mange. En telefon som rapporterer 390 × 844 med DPR 3, har et panel på omtrent 1170 × 2532 enhetspiksler. På datamaskin endrer nettleserzoom og operativsystemets skjermskalering både DPR og CSS-størrelsen, så en 2560 × 1440-skjerm med 125 % skalering rapporterer 2048 × 1152.

Skjermoppløsningen er hele skjermen; tilgjengelig plass utelater permanente systemlinjer som Windows-oppgavelinjen eller macOS-menylinjen; visningsområdet (viewport) er den delen av nettleservinduet der siden vises, uten verktøylinjer, men inkludert eventuelle rullefelt. Viewporten er det CSS-mediespørringer som min-width: 768px svarer på, så det er tallet du bør sjekke når du tester responsive oppsett.

Fargeskjema og verdier for redusert bevegelse kommer fra de samme CSS-mediefunksjonene som nettsteder bruker for å tilpasse seg systeminnstillingene dine. Brands, platform og mobile kommer fra User-Agent Client Hints, som bare Chromium-baserte nettlesere gir. Noen nettlesere avrunder eller fikser disse verdiene med vilje for å redusere fingeravtrykk, så de samsvarer kanskje ikke nøyaktig med maskinvaren din.

Eksempler

Teste et responsivt oppsett

Et oppsett bryter sammen på en kollegas bærbare PC. De kopierer detaljene, som viser en 1280 × 649 viewport med DPR 1,5. Sett nettleserens enhetsverktøylinje til samme viewport for å gjenskape problemet.

Velge bildestørrelser

Et produktbilde vises 400 CSS-piksler bredt. På en telefon med DPR 3 trenger det 1200 piksler for å se skarpt ut, noe som forteller deg hvilke størrelser du bør inkludere i srcset.

Sjekke skjermskalering

En 3840 × 2160-skjerm rapporterer 2560 × 1440 med DPR 1,5: Windows skalerer skjermen med 150 %.

Ofte stilte spørsmål

Hvorfor avviker skjermoppløsningen fra spesifikasjonen til skjermen min?

Nettlesere rapporterer CSS-piksler, som er de fysiske pikslene delt på skaleringsfaktoren. Multipliser med enhetens pikselforhold for å komme nær maskinvareoppløsningen. Nettleserzoom endrer også den rapporterte verdien.

Hva er forskjellen mellom skjermstørrelse og visningsområdestørrelse?

Skjermstørrelsen er hele skjermen. Visningsområdet er bare området inne i nettleservinduet der siden tegnes, så det er mindre og endres når du endrer størrelsen på vinduet eller åpner utviklerverktøy.

Blir denne informasjonen brukt til å spore meg?

Ikke av denne siden: verdiene vises bare for deg og lagres eller sendes ikke noe sted. Nettsteder kan lese de samme verdiene, og derfor runder noen nettlesere dem for å gjøre fingeravtrykksporing vanskeligere.

Hvorfor vises berøringsstøtte på den bærbare PC-en min?

Berøringsstøtte er basert på antallet berøringspunkter nettleseren rapporterer. Bærbare PC-er med berøringsskjerm rapporterer dem selv om du hovedsakelig bruker mus, og enkelte drivere eller fjernskrivebordsoppsett rapporterer berøringsstøtte uten berøringsskjerm.

Personvern

Alle verdier leses av JavaScript i nettleseren din og vises bare for deg. Ingenting lagres, lastes opp eller inkluderes i analyser; kun en anonym hendelse om at verktøyet ble åpnet og brukt, registreres.