Skjermstørrelsedetektoren

Referanse

Viewport vs skjermoppløsning — hva er forskjellen?

Viewport er det synlige området til en nettside i nettleservinduet, målt i CSS-piksler (window.innerWidth × window.innerHeight). Det endres når du endrer størrelse på nettleseren eller åpner DevTools. Skjermoppløsning er det totale pikselantallet til din fysiske skjerm (screen.width × screen.height) — dette er fast og bestemmes av maskinvaren og skjerminnstillingene. For responsivt webdesign er det viewporten som teller — den bestemmer hvilke CSS mediespørringer og brekkpunkter som er aktive.

Hva er enhetspikselforhold (DPR)?

Enhetspikselforholdet (DPR) forteller deg hvor mange fysiske (maskinvare) piksler som tilsvarer én CSS-piksel. En DPR på 1 betyr 1:1-mapping (standardskjermer). En DPR på 2 betyr en Retina/HiDPI-skjerm — hver CSS-piksel gjengis med 4 fysiske piksler (2×2), noe som gir skarpere tekst og bilder. En DPR på 3 er vanlig på avanserte smarttelefoner. Dette er viktig for: å servere @2x/@3x-bilder til skjermer med høy DPR, forstå hvorfor skjermbilder på Retina-skjermer har dobbel oppløsning, og feilsøke layoutproblemer som bare vises ved bestemte DPR-verdier.

Bruksområder for skjermdeteksjon

Testing av responsivt design — verifiser at CSS-brekkpunkter utløses ved riktige viewport-bredder uten å åpne DevTools. Feilrapporter — del nøyaktige viewport-dimensjoner, skjermoppløsning og DPR når du rapporterer visningsproblemer til utviklere. Skjermbildeplanlegging — kjenn nøyaktige dimensjoner før du tar skjermbilder for dokumentasjon eller app-store-oppføringer. Annonse- og bannerstørrelse — verifiser at viewport-dimensjoner matcher påkrevde annonseplassstørrelser for displayannonsering.

Personvern

Skjermdimensjoner leses lokalt fra nettleserens API-er. Ingen data sendes til noen server.