Käyttöohje

Avaa sivu. Arvot luetaan selaimestasi välittömästi.
Muuta ikkunan kokoa tai käännä laitetta, niin näet viewportin koon ja suunnan päivittyvän.
Käytä ”Kopioi kaikki” -toimintoa liittääksesi tiedot vikailmoitukseen tai tukipyyntöön.

Näin se toimii

Selaimet ilmoittavat koot CSS-pikseleinä, eli yksikkönä, jota verkkosivut käyttävät asettelussa. Korkean pikselitiheyden näytöillä yksi CSS-pikseli piirretään usealla fyysisellä pikselillä: laitteen pikselisuhde (DPR) kertoo, kuinka monella. Puhelin, joka ilmoittaa 390 × 844 ja DPR-arvon 3, sisältää paneelin, jossa on noin 1170 × 2532 laite-pikseliä. Työpöydällä selaimen zoomaus ja käyttöjärjestelmän näytön skaalaus muuttavat sekä DPR-arvoa että CSS-kokoa, joten 2560 × 1440 -näyttö 125 %:n skaalauksella ilmoittaa 2048 × 1152.

Näytön resoluutio on koko näyttö; käytettävissä oleva tila jättää pois pysyvät käyttöjärjestelmän palkit, kuten Windowsin tehtäväpalkin tai macOS-valikkopalkin; näkymä (viewport) on se osa selainikkunasta, jossa sivu näkyy, ilman työkalupalkkeja mutta mahdollinen vierityspalkki mukaan lukien. Viewport on se, mihin CSS-media-kyselyt, kuten min-width: 768px, reagoivat, joten se on arvo, joka kannattaa tarkistaa testattaessa responsiivisia asetteluja.

Väriskeeman ja vähennetyn liikkeen arvot tulevat samoista CSS-mediatoiminnoista, joita sivustot käyttävät mukautuakseen järjestelmäasetuksiin. Tuotemerkit, alusta ja mobiili tulevat User-Agent Client Hints -tiedoista, joita tarjoavat vain Chromium-pohjaiset selaimet. Jotkin selaimet pyöristävät tai kiinteyttävät näitä arvoja tahallaan vähentääkseen sormenjälkien muodostumista, joten ne eivät välttämättä vastaa tarkasti laitteistoasi.

Esimerkit

Responsiivisen asettelun testaaminen

Asettelu hajoaa kollegan kannettavalla. Hän kopioi tiedot, joissa näkyy 1280 × 649 viewport DPR-arvolla 1,5. Aseta selaimesi laitetyökalupalkki samaan viewport-kokoon toistaaksesi ongelman.

Kuvakokojen valitseminen

Tuotekuva näytetään 400 CSS-pikselin levyisenä. DPR 3 -puhelimella se tarvitsee 1200 pikseliä näyttääkseen terävältä, mikä kertoo, mitkä koot kannattaa sisällyttää srcset-määritteeseen.

Näytön skaalauksen tarkistaminen

3840 × 2160 -näyttö ilmoittaa 2560 × 1440 DPR-arvolla 1,5: Windows skaalaa näyttöä 150 %.

Usein kysytyt kysymykset

Miksi näytön resoluutio eroaa monitorini teknisistä tiedoista?

Selaimet ilmoittavat CSS-pikselit, jotka ovat fyysiset pikselit jaettuna skaalauskertoimella. Kerro laitteen pikselisuhteella, niin pääset lähelle laitteiston resoluutiota. Myös selaimen zoomaus muuttaa ilmoitettua arvoa.

Mitä eroa on näytön koolla ja viewportin koolla?

Näytön koko on koko näyttö. Viewport on vain selainikkunan sisällä oleva alue, jolle sivu piirretään, joten se on pienempi ja muuttuu, kun muutat ikkunan kokoa tai avaat kehittäjätyökalut.

Käytetäänkö näitä tietoja seurantaan?

Tämä sivu ei käytä niitä siihen: arvot näytetään vain sinulle, eikä niitä tallenneta tai lähetetä minnekään. Verkkosivustot voivat lukea samoja arvoja, minkä vuoksi jotkin selaimet pyöristävät niitä vaikeuttaakseen sormenjäljen muodostamista.

Miksi kannettavassani näkyy kosketustuki?

Kosketustuki perustuu selaimen ilmoittamien kosketuspisteiden määrään. Kosketusnäytölliset kannettavat ilmoittavat ne, vaikka käyttäisit pääasiassa hiirtä, ja jotkin ajurit tai etätyöpöytäkokoonpanot ilmoittavat kosketustuen ilman kosketusnäyttöä.

Tietosuoja

Kaikki arvot luetaan selaimessasi JavaScriptillä ja näytetään vain sinulle. Mitään ei tallenneta, lähetetä tai sisällytetä analytiikkaan; ainoastaan anonyymi tapahtuma työkalun avaamisesta ja käytöstä kirjataan.