L'objet window.screen contient des informations à propos de l'écran de l'utilisateur.
L'objet window.screen
peut être écrit sans le préfixe window.
Propriétés:
écran.largeur
écran.hauteur
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth
La propriété screen.width
renvoie la largeur de l'écran du visiteur en pixels.
Afficher la largeur de l'écran en pixels :
document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;
Le résultat sera :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen width is " + screen.width;
</script>
</body>
</html>
La propriété screen.height
renvoie la hauteur de l'écran du visiteur en pixels.
Afficher la hauteur de l'écran en pixels :
document.getElementById("demo").innerHTML =
"Screen Height: " + screen.height;
Le résultat sera :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen height is " + screen.height;
</script>
</body>
</html>
La propriété screen.availWidth
renvoie la largeur de l'écran du visiteur, en pixels, moins des fonctionnalités d'interface comme la barre des tâches Windows.
Afficher la largeur disponible de l'écran en pixels :
document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;
Le résultat sera :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Available screen width is " + screen.availWidth;
</script>
</body>
</html>
La propriété screen.availHeight
renvoie la hauteur de l'écran du visiteur, en pixels, moins les fonctionnalités de l'interface comme la barre des tâches Windows.
Afficher la hauteur disponible de l'écran en pixels :
document.getElementById("demo").innerHTML =
"Available Screen Height: " + screen.availHeight;
Le résultat sera :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Available screen height is " + screen.availHeight;
</script>
</body>
</html>
La propriété screen.colorDepth
renvoie le nombre de bits utilisés pour afficher une couleur.
Tous les ordinateurs modernes utilisent du matériel 24 bits ou 32 bits pour la résolution des couleurs :
24 bits = 16 777 216 "vraies couleurs" différentes
32 bits=4 294 967 296 « Couleurs profondes » différentes
Les ordinateurs plus anciens utilisaient 16 bits : 65 536 résolutions « hautes couleurs » différentes.
Les très vieux ordinateurs et les vieux téléphones portables utilisaient 8 bits : 256 "couleurs VGA" différentes.
Afficher la profondeur de couleur de l'écran en bits :
document.getElementById("demo").innerHTML =
"Screen Color Depth: " + screen.colorDepth;
Le résultat sera :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen color depth is " + screen.colorDepth;
</script>
</body>
</html>
Les valeurs #rrggbb (rgb) utilisées en HTML représentent les « vraies couleurs » (16 777 216 couleurs différentes)
La propriété screen.pixelDepth
renvoie la profondeur en pixels de l'écran.
Afficher la profondeur de pixels de l'écran en bits :
document.getElementById("demo").innerHTML =
"Screen Pixel Depth: " + screen.pixelDepth;
Le résultat sera :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen pixel depth is " + screen.pixelDepth;
</script>
</body>
</html>
Pour les ordinateurs modernes, la profondeur de couleur et la profondeur de pixel sont égales.