Écran de fenêtre JavaScript


Table des matières

    Afficher la table des matières


L'objet window.screen contient des informations à propos de l'écran de l'utilisateur.


Écran de fenêtre

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


Largeur de l'écran de la fenêtre

La propriété screen.width renvoie la largeur de l'écran du visiteur en pixels.

Exemple

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>

Hauteur de l'écran de fenêtre

La propriété screen.height renvoie la hauteur de l'écran du visiteur en pixels.

Exemple

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>


Largeur disponible de l'écran de fenêtre

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.

Exemple

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>

Hauteur disponible pour l'écran de fenêtre

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.

Exemple

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>

Profondeur de couleur de l'écran de fenêtre

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.

Exemple

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)


Profondeur de pixels de l'écran de fenêtre

La propriété screen.pixelDepth renvoie la profondeur en pixels de l'écran.

Exemple

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.