JavaScript: Objekt Screen

Objekt screen je lastnost objekta window in omogoča dostop do podatkov o zaslonu naprave. Z njim lahko pridobimo širino in višino zaslona, prostor, ki je na voljo spletnim vsebinam, globino barv in orientacijo zaslona. Vrednosti, ki jih vrnejo lastnosti kot so screen.width, screen.height ipd., niso vedno dejanske (fizične) točke na zaslonu, ampak tako imenovani CSS piksli.

Pomni: Lastnosti objekta screen običajno vračajo vrednosti v CSS pikslih, ki predstavljajo logične enote prikaza. Te niso nujno enake dejanskemu številu fizičnih pikslov zaslona, saj lahko en CSS piksel ustreza več fizičnim pikslom.

Osnovna pravila

Objekt screen vsebuje podatke o zaslonu naprave.
Lastnosti width in height vrneta širino in višino zaslona v CSS piksljih.
Lastnosti availWidth in availHeight vrneta del zaslona, ki je na voljo spletnim vsebinam.
Lastnosti colorDepth in pixelDepth vrneta barvno oziroma bitno globino zaslona.
Lastnost orientation vrne trenutno orientacijo zaslona.

Pomni: Objekt screen lahko praviloma uporabljamo tudi brez zapisa predpone window., na primer screen.width namesto window.screen.width.

Lastnosti objekta `screen`

Lastnost	Opis
`screen.width`	vrne širino zaslona v CSS piksljih
`screen.height`	vrne višino zaslona v CSS piksljih
`screen.availWidth`	vrne vodoravni prostor, ki je na voljo spletnim vsebinam
`screen.availHeight`	vrne navpični prostor, ki je na voljo spletnim vsebinam
`screen.colorDepth`	vrne barvno globino zaslona v bitih
`screen.pixelDepth`	vrne bitno globino zaslona, pogosto enako kot `colorDepth`
`screen.orientation`	vrne objekt z informacijo o trenutni orientaciji zaslona

Pozor: Lastnosti screen.width in screen.height ne opisujeta nujno velikosti trenutno vidnega dela okna brskalnika. Za to praviloma uporabljamo window.innerWidth in window.innerHeight.

Širina in višina zaslona

Lastnost screen.width vrne širino, lastnost screen.height pa višino uporabnikovega zaslona v CSS piksljih.

<p id="primer"></p>
<script>
document.getElementById("primer").innerHTML =
   "Širina zaslona: " + screen.width +
   "<br>Višina zaslona: " + screen.height;
</script>

Širina in višina zaslona, ki je na voljo

Lastnosti screen.availWidth in screen.availHeight vrneta prostor, ki je na voljo spletnim vsebinam. Ta prostor je lahko manjši od celotne širine ali višine zaslona, če del zaslona zasedajo stalni deli uporabniškega okolja.

<p id="primer1"></p>
<script>
document.getElementById("primer1").innerHTML =
   "Širina zaslona, ki je na voljo: " + screen.availWidth +
   "<br>Višina zaslona, ki je na voljo: " + screen.availHeight;
</script>

Barvna globina, bitna globina in orientacija

Lastnost screen.colorDepth vrne barvno globino zaslona v bitih. Lastnost screen.pixelDepth vrne bitno globino zaslona in je v številnih okoljih enaka lastnosti colorDepth.

<p id="primer2"></p>
<script>
document.getElementById("primer2").innerHTML =
   "Barvna globina: " + screen.colorDepth +
   "<br>Bitna globina: " + screen.pixelDepth;
</script>

Za sodobne naprave je uporabna tudi lastnost screen.orientation, ki vrne objekt z informacijo o trenutni orientaciji zaslona.

<p id="primer3"></p>
<script>
document.getElementById("primer3").textContent =
   "Orientacija zaslona: " + screen.orientation.type;
</script>

Pomni: Lastnost screen.orientation.type lahko na primer vrne vrednosti, kot sta landscape-primary ali portrait-primary.

Priporočila

Za podatke o zaslonu uporabljaj objekt screen, za podatke o vidnem delu okna pa objekt window.
Pri razlagi ločuj med celotno velikostjo zaslona in razpoložljivim prostorom.
Upoštevaj, da so vrednosti povezane z okoljem uporabnika in se med napravami lahko razlikujejo.
Lastnosti objekta screen uporabljaj predvsem za informativne in prilagoditvene namene, ne pa kot edino merilo za zasnovo vmesnika.

Pogoste napake

Lastnosti screen.width in screen.height se zamenjata med seboj.
Predpostavi se, da availWidth in availHeight vedno pomenita enak prostor kot width in height.
Barvna globina se razlaga kot neposredno število barv, čeprav lastnosti vračata vrednost v bitih.
Objekt screen se uporablja za merjenje vidnega dela dokumenta, čeprav je za to praviloma primernejši objekt window.
Neupoštevanje, da se vrednosti med napravami, operacijskimi sistemi in brskalniki lahko razlikujejo.

Nazaj

Naprej