Kas ir ekrāna un skata apgabala informācija?
Katra pārlūkprogramma nodrošina screen objektu un skata apgabalu. screen.width un screen.height rāda ekrānu CSS pikseļos, bet innerWidth un innerHeight — redzamo skata apgabalu bez rīkjoslām. devicePixelRatio norāda, cik fizisku punktu atbilst vienam CSS pikselim, un colorDepth — cik bitu raksturo katru pikseli.
Piemērs: portatīvais dators ar fizisku 2560x1600 paneli un devicePixelRatio 2 ziņo screen.width=1280 un screen.height=800 CSS pikseļu — tieši tādu izmēru, kādu norādītu media vaicājumā. colorDepth 24 nozīmē 8 bitus kanālā, t. i., 2^24 = 16 777 216 krāsu. Ja innerWidth ir lielāks par innerHeight, ierīce ir ainavas orientācijā; samaini tos, un tā būs portreta.
Kā lasīt ekrāna pārskatu
- Atver lapu — rīks uzreiz nolasa vērtības no pārlūka un neko neaugšupielādē.
- Salīdzini ekrāna izmēru ar loga izmēru, lai redzētu, cik daudz vietas aizņem rīkjoslas.
- Pārbaudi ierīces pikseļu attiecību, lai izlemtu, vai grafikai vajag Retina variantus.
- Vēro, kā vērtības mainās reāllaikā, mainot loga izmēru vai pagriežot ierīci.
Ekrāns un skata apgabals — biežāk uzdotie jautājumi
Kā atšķiras ekrāna un loga izmērs?
screen.width rāda visu ekrānu CSS pikseļos, bet innerWidth — tikai redzamo skata apgabalu, ko samazina rīkjoslas un sānu paneļi. Media vaicājumi reaģē uz skata apgabalu, nevis ekrānu.
Ko nozīmē ierīces pikseļu attiecība?
Tas ir fizisko pikseļu skaits uz vienu CSS pikseli. Attiecība 2 (parasta Retina un daudzās telefonās) nozīmē, ka 10px mala tiek uzzīmēta ar 20 fiziskiem pikseļiem, tāpēc attēli jāpiegādā 2x lielumā.
Kāpēc krāsu dziļums parasti ir 24 vai 30?
24 biti ir 8 biti sarkanajam, zaļajam un zilajam kanālam — 16 777 216 krāsu. 30 bitu (10 bitu kanālā) paneļi dod smalkākas pārejas HDR, taču pārlūks vai draiveris var ierobežot ziņoto vērtību.
