Mis on ekraani- ja vaateavainfo?
Iga brauser pakub screen-objekti ja vaateava. screen.width ja screen.height näitavad ekraani CSS-pikslites, innerWidth ja innerHeight aga nähtavat vaateava, millest on ribad maha arvatud. devicePixelRatio ütleb, mitu füüsilist punkti vastab ühele CSS-pikslile, ja colorDepth, mitu bitti iga pikslit kirjeldab.
Näide: sülearvuti füüsilise 2560x1600 paneeliga ja devicePixelRatio väärtusega 2 teatab screen.width=1280 ja screen.height=800 CSS-pikslit — täpselt see suurus, millele meediapäringus sihid. colorDepth 24 tähendab 8 bitti kanali kohta, seega 2^24 = 16 777 216 värvi. Kui innerWidth on suurem kui innerHeight, on seade horisontaalpaigutuses; vaheta need ja see on vertikaalpaigutuses.
Kuidas ekraaniaruannet lugeda
- Ava leht — tööriist loeb väärtused brauserist kohe ega laadi midagi üles.
- Võrdle ekraani ja akna suurust, et näha, kui palju ruumi ribad endale võtavad.
- Kontrolli seadme pikslisuhet, et otsustada, kas graafika vajab Retina-variante.
- Jälgi, kuidas väärtused akna suuruse muutmisel või seadme pööramisel reaalajas uuenevad.
Ekraan ja vaateava — korduma kippuvad küsimused
Mille poolest erinevad ekraani ja akna suurus?
screen.width näitab kogu ekraani CSS-pikslites, innerWidth aga ainult nähtavat vaateava, mida ribad ja külgpaneelid vähendavad. Meediapäringud reageerivad vaateavale, mitte ekraanile.
Mida tähendab seadme pikslisuhe?
See on füüsiliste pikslite arv ühe CSS-piksli kohta. Suhe 2 (levinud Retina ja paljude telefonide puhul) tähendab, et 10px ääris joonistatakse 20 füüsilise pikslina, seega tuleks pildid anda 2x suuruses.
Miks on värvisügavus tavaliselt 24 või 30?
24 bitti tähendab 8 bitti punase, rohelise ja sinise kanali kohta — 16 777 216 värvi. 30-bitised (10 bitti kanali kohta) paneelid annavad HDR-i jaoks peenemad üleminekud, kuid brauser või draiver võib teatatud väärtust piirata.
