Comment utiliser l’objet screen avec JavaScript

Connaissez tous les détails de l’écran d’affichage de vos visiteurs avec l’objet JavaScript screen. Très utile pour ajuster automatiquement l’affichage de votre site web en fonction du périphérique d’affichage (tablette, smartphone…).

Tout est dans le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment utiliser l’objet screen avec JavaScript

Bonjour à tous et bienvenu sur Développement Facile.

Ensemble on continu les cours dédiés aux objets JavaScript dont vous pourriez avoir besoin dans votre développement, et là, ensemble nous allons aborder l’objet screen, vous allez apprendre toutes les méthodes de l’objet screen, les propriétés que vous pouvez utiliser en JavaScript directement dans votre code, pour ajouter des interactions avec l’utilisateur.

Objet screen

L’objet screen c’est tout simplement, l’écran utilisé par l’utilisateur, donc imaginez que vous allez pouvoir tout savoir, la résolution de l’utilisateur, si il est en 16, 24, 32 bits, etc.
J’ai regroupé, là vous voyez que j’ai regroupé toutes les propriétés utilisées, disponibles, avec l’objet screen, également les méthodes, et je vais, tout simplement, vous les expliquer une par une.
availHeight et availWidth c’est la hauteur de l’écran utilisé en pixels et sa largeur,
colorDepth je viens juste de vous le dire, c’est la profondeur de couleur de l’écran, 16, 32 bits, donc le nombre de couleurs de l’écran peut restituer,
pixelDepth c’est la résolution de l’écran en nombre de couleur exprimé en bits par pixels,
height la hauteur totale d’affichage,
width la largeur d’affichage de l’écran.

Par exemple on va afficher la résolution regardez, colorDepth 32 bits, on va le réutiliser donc on va afficher la résolution de l’écran avec largeur c’est screen.availWidth, hauteur screen.availHeight, donc on récupère ces propriétés, on affiche par exemple en 2048 par x pixels avec des couleurs en … regardez, la variable couleur c’est screen.colorDepth 32 bits, la surface utile de votre affichage et screen.availWidth donc le nombre de pixels disponibles, regardez en largeur availWidth et availHeight en hauteur pour l’écran, donc on affiche tout ça dans une boite de dialogue.

Votre plan d’actions !

L’avantage de l’objet screen, c’est que ça va vous permettre d’ajuster l’affichage de votre site Internet, en fonction de l’espace disponible sur l’écran de votre internaute, donc très intéressant pour optimiser l’affichage, que l’internaute soit sur un écran HD, une tablette, un Smartphone, ou un écran télé, vous allez pouvoir adapter la résolution de votre site internet. Servez-vous de cet objet screen, retrouvez sous ce cours un exemple de code source, si vous avez des questions, posez-les directement sous ce cours vidéo et je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source JavaScript

Voici un exemple de script JavaScript pour afficher la résolution de l’écran de vos visiteurs.

Adaptez-vous vos sites web en fonction de l’écran de vos visiteurs ?

Dites moi dans les commentaires, si vous faites des sites web responsives pour vos visiteurs, en fonction de leur périphérique d’affichage. Et surtout comment vous le faîtes, avec quels scripts.