Détecter la taille de l’écran en javascript
Lorsque vous développez un jeu vidéo html5, il peut être parfois utile de connaitre la taille de l’écran pour ajuster la position des différents composants graphiques du jeu. Je vous montre comment le faire en deux lignes de code javascript.
Javascript met à disposition du développeur des propriétés modifiables indiquant la taille des éléments contenu dans une page web.
Dans le cadre d’un jeu vidéo, il faut s’intéresser plus particulièrement à l’objet window et ses propriétés innerWidth et innerHeight.
La propriété innerWidth indique la largeur de l’écran.
La propriété innerHeight indique la hauteur de l’écran.
Lorsque vous utilisez un smartphone ou une tablette, ces propriétés varient en fonction de l’orientation dans laquelle vous tenez votre smartphone ou tablette : la valeur de l’orientation paysage sont l’inverse de l’orientation portrait.
En javascript, cela donne.
let tailleEcranX = window.innerWidth;
let tailleEcranY = window.innerHeight;La valeur de window.innerWidth en mode paysage est égale à la valeur de window.innerHeight en mode portrait.
La valeur de window.innerHeight en mode paysage est égale à la valeur de window.innerWidth en mode portrait.
Rien de complexe donc, mais bien utile pour adapter un contenu à un smartphone sans utiliser les media Queries CSS3.
