Dans cette 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 possède 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 ».
Exemple d'utilisation des propriétés de l'objet JavaScript Screen
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript by lawal alao</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="cours.css">
<script src='cours.js' async></script>
</head>
<body>
<h1>Titre principal</h1>
<p>Un paragraphe</p>
<p id='p1'></p>
</body>
</html>
code js
document.getElementById('p1').innerHTML =
'Dimensions totales de l\'écran : ' + screen.width + '*' + screen.height +
'<br>Surface disponible : ' + screen.availWidth + '*' + screen.availHeight +
'<br>Palette de couleur : ' + screen.colorDepth +
'<br>Résolution : ' + screen.pixelDepth;
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.
Merci a tous
Top comments (0)