Apprendre Javascript pour rendre vos pages Web interactives
Page 18: Objet screen
Toutes les pages 
Apprendre Javascript pour rendre vos pages Web interactives
Page 18
Objet screen
Objet screen
L'écran de l’utilisateur: Objet screen
Comme son nom l'indique, l'objet screen permet de recueillir des informations relatives à l'écran de l'utilisateur. Le fait de connaitre ces informations s'avère utile si on souhaite afficher du contenu particulier, comme un jeu, une vidéo en plein écran ou un plan de visite virtuelle...L'objet screen dispose des attributs principaux suivants:
- width: retourne la largeur de l'écran en pixel.
- height: retourne la hauteur de l'écran en pixel.
- availWidth: retourne la largeur disponible de l'écran en pixel, c'est à dire la largeur utilisable par le navigateur.
- availHeight: retourne la hauteur disponible de l'écran en pixel. Par exemple, la hauteur de la barre des tâches (si elle est affichée horizontalement) est retirée de la hauteur globale de l'écran.
- colorDepth: retourne le nombre de bits qui codent les couleurs de l'écran (32 par exemple).
Exemple:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function definition(){
alert(screen.width+"x"+screen.height);
}
</script>
</head>
<body>
<input type="button" value="Afficher la définition de l'écran" onClick="definition()" />
</body>
</html>
Ce qui donne:
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function definition(){
alert(screen.width+"x"+screen.height);
}
</script>
</head>
<body>
<input type="button" value="Afficher la définition de l'écran" onClick="definition()" />
</body>
</html>
Cet objet permettait également d'adapter l'affichage du contenu selon les dimensions de l'écran, mais cette technique est révolue suite à l'apparition des media queries avec CSS3.
Page 18
Objet screen
Objet screen
