Kas yra ekrano ir vaizdo srities informacija?
Kiekviena naršyklė teikia screen objektą ir vaizdo sritį. screen.width ir screen.height rodo ekraną CSS pikseliais, o innerWidth ir innerHeight — matomą vaizdo sritį be juostų. devicePixelRatio nurodo, kiek fizinių taškų atitinka vieną CSS pikselį, o colorDepth — kiek bitų apibūdina kiekvieną pikselį.
Pavyzdys: nešiojamasis kompiuteris su fiziniu 2560x1600 ekranu ir devicePixelRatio 2 praneša screen.width=1280 ir screen.height=800 CSS pikselių — būtent tokį dydį nurodytumėte media užklausoje. colorDepth 24 reiškia 8 bitus kanalui, t. y. 2^24 = 16 777 216 spalvų. Jei innerWidth didesnis už innerHeight, įrenginys gulsčioje orientacijoje; sukeiskite juos ir jis bus statmenoje.
Kaip skaityti ekrano ataskaitą
- Atidarykite puslapį — priemonė iškart nuskaito reikšmes iš naršyklės ir nieko neįkelia.
- Palyginkite ekrano ir lango dydį, kad pamatytumėte, kiek vietos užima juostos.
- Patikrinkite įrenginio pikselių santykį, kad nuspręstumėte, ar grafikai reikia Retina variantų.
- Stebėkite, kaip reikšmės atsinaujina keičiant lango dydį ar sukant įrenginį.
Ekranas ir vaizdo sritis — dažni klausimai
Kuo skiriasi ekrano ir lango dydis?
screen.width rodo visą ekraną CSS pikseliais, o innerWidth — tik matomą vaizdo sritį, kurią sumažina juostos ir šoniniai skydeliai. Media užklausos reaguoja į vaizdo sritį, o ne į ekraną.
Ką reiškia įrenginio pikselių santykis?
Tai fizinių pikselių skaičius vienam CSS pikseliui. Santykis 2 (įprastas Retina ir daugelyje telefonų) reiškia, kad 10px rėmelis nubraižomas 20 fizinių pikselių, tad paveikslėlius reikia teikti 2x dydžio.
Kodėl spalvų gylis paprastai yra 24 arba 30?
24 bitai – tai 8 bitai raudonam, žaliam ir mėlynam kanalui, t. y. 16 777 216 spalvų. 30 bitų (10 bitų kanalui) ekranai suteikia smulkesnius perėjimus HDR, tačiau naršyklė ar tvarkyklė gali apriboti pranešamą reikšmę.
