L’interface et l’objet Screen en JavaScript

Dans cette nouvelle leçon, nous allons étudier l’interface Screen à travers l’objet JavaScript Screen et voir les propriétés et méthodes intéressantes de cet objet.

 

Présentation de l’objet Screen

L’objet Screen nous donne accès à des informations concernant l’écran de vos visiteurs, comme la taille ou la résolution de l’écran par exemple.

On va pouvoir utiliser ces informations pour proposer différents affichages à différents visiteurs par exemple.

On va pouvoir récupérer un objet Screen en utilisant la propriété screen de Window.

 

Les propriétés et méthodes de l’objet Screen

L’objet Screen nous donne accès à une grosse dizaine de propriétés dont 6 sont bien supportées par les navigateurs et particulièrement intéressantes :

  • width : retourne la largeur totale de l’écran ;
  • availWidth : retourne la largeur de l’écran moins celle de la barre de tâches ;
  • height : retourne la hauteur totale de l’écran ;
  • availHeight : retourne la hauteur de l’écran moins celle de la barre de tâches ;
  • colorDepth : retourne la profondeur de la palette de couleur de l’écran en bits ;
  • pixelDepth : retourne la résolution de l’écran en bits par pixel.

Notez que si le navigateur ne peut pas déterminer les valeurs de colorDepth et de pixelDepth ou si il ne veut pas les retourner pour des raisons de sécurité, il doit normalement renvoyer « 24 ».

Code HTML support pour présentation des propriétés et méthodes de l'objet Screen

Présentation des propriétés de l'objet JavaScript Screen

Exemple d'utilisation des propriétés de l'objet JavaScript Screen

See the Pen
Cours JavaScript 7.5.1
by Pierre (@pierregiraud)
on CodePen.

L’objet Screen possède également deux méthodes lockOrientation() et unlockOrientation() mais qui sont aujourd’hui dépréciées et ne devraient pas être utilisées.

Laisser un commentaire