Javascript - Pour rendre vos pages interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Javascript - Pour rendre vos pages interactives Niveau recommandé pour le cours de Javascript - Pour rendre vos pages interactives Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 18: Objet screen

Toutes les pages

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:
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.