JavaScript vinduesskærm

Indholdsfortegnelse

    Vis indholdsfortegnelse

Window.screen-objektet indeholder information om brugerens skærm.

Vinduesskærm

Objektet window.screen kan skrives uden vinduespræfikset.

Ejendomme:

  • screen.width

  • skærm.højde

  • screen.availWidth

  • screen.availHeight

  • screen.colorDepth

  • screen.pixelDepth

Vindues skærmbredde

Egenskaben screen.width returnerer bredden af den besøgendes skærm i pixels.

Eksempel

Vis skærmens bredde i pixels:

document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;

Resultatet bliver:

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen width is " + screen.width;
</script>

</body>
</html>

Vindues skærmhøjde

Egenskaben screen.height returnerer højden på den besøgendes skærm i pixels.

Eksempel

Vis skærmens højde i pixels:

document.getElementById("demo").innerHTML =
"Screen Height: " + screen.height;

Resultatet bliver:

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen height is " + screen.height;
</script>

</body>
</html>

Vinduesskærm tilgængelig bredde

Egenskaben screen.availWidth returnerer bredden af den besøgendes skærm i pixels, minus grænsefladefunktioner som Windows-proceslinjen.

Eksempel

Vis den tilgængelige bredde af skærmen i pixels:

document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;

Resultatet bliver:

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen width is " + screen.availWidth;
</script>

</body>
</html>

Vinduesskærm tilgængelig højde

Egenskaben screen.availHeight returnerer højden på den besøgendes skærm, i pixels, minus grænsefladefunktioner som Windows-proceslinjen.

Eksempel

Vis den tilgængelige højde på skærmen i pixels:

document.getElementById("demo").innerHTML =
"Available Screen Height: " + screen.availHeight;

Resultatet bliver:

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen height is " + screen.availHeight;
</script>

</body>
</html>

Vinduesskærms farvedybde

Egenskaben screen.colorDepth returnerer antallet af bits brugt til at vise én farve.

Alle moderne computere bruger 24 bit eller 32 bit hardware til farveopløsning:

  • 24 bit = 16.777.216 forskellige "True Colors"

  • 32 bit=4.294.967.296 forskellige "dybe farver"

Ældre computere brugte 16 bit: 65.536 forskellige "Høj farver" opløsning.

Meget gamle computere og gamle mobiltelefoner brugte 8 bit: 256 forskellige "VGA-farver".

Eksempel

Vis skærmens farvedybde i bits:

document.getElementById("demo").innerHTML = 
"Screen Color Depth: " + screen.colorDepth;

Resultatet bliver:

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen color depth is " + screen.colorDepth;
</script>

</body>
</html>

#rrggbb (rgb)-værdierne, der bruges i HTML, repræsenterer "True Colors" (16.777.216 forskellige farver)

Vinduesskærm Pixeldybde

Egenskaben screen.pixelDepth returnerer skærmens pixeldybde.

Eksempel

Vis pixeldybden på skærmen i bits:

document.getElementById("demo").innerHTML =
"Screen Pixel Depth: " + screen.pixelDepth;

Resultatet bliver:

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen pixel depth is " + screen.pixelDepth;
</script>

</body>
</html>

For moderne computere er Color Depth og Pixel Depth ens.