Modifier l’orientation de l’écran avec javascript
Certains jeux vidéos ne peuvent se jouer qu’en mode portrait ou en mode paysage. Cela nécessite que vous détectiez dans quelle position sont le smartphone ou la tablette de manière à informer le joueur et l’inciter à changer l’orientation. Je vous montre comment faire en quelques lignes de code javascript.
Le principe de l’exemple
Deux blocs div sont créés dans la page web :
– l’un qui ne s’affichera que lorsque le smartphone ou ta tablette seront orientés en mode portrait;
– l’autre qui ne s’affichera que lorsque le smartphone ou ta tablette seront orientés en mode paysage.
Ils ne s’afficheront jamais en même temps.
Le code html5.
<html>
<body>
<div id="portrait" style="width:600px;height:400px;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;border:2px solid #000000;text-align:center;font-size:100px;vertical-align:middle;display:none">
MODE PORTRAIT
</div>
<div id="paysage" style="width:600px;height:400px;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;border:2px solid #000000;text-align:center;font-size:100px;vertical-align:middle;display:none">
MODE PAYSAGE
</div>
</body>
</html>La technique la plus évidente
A partir de la taille de l’écran, il est possible de déterminer si l’appareil en en mode paysage ou portrait.
Comme vu dans l’article Détecter la taille de l’écran en javascript :
– la propriété innerWidth indique la largeur de l’écran;
– la propriété innerHeight indique la hauteur de l’écran.
Le valeurs renvoyées sont relatives à l’orientation du smartphone ou de la tablette. Un smartphone ayant par exemple une résolution de 1200 pixels sur 800 pixels indique :
– en mode portrait : 1200 pour innerHeight et 800 pour innerWidth;
– en mode paysage : 800 pour innerHeight et 1200 pour innerWidth.
Il est possible de détecter l’orientation de l’écran en comparant innerHeight et innerWidth:
– si innerHeight < innerWidth, le smartphone a une orientation paysage;
– inversement, si innerHeight > innerWidth, le smartphone a une orientation portrait.
Faites le test en rafraichissant la page après avoir changer l’orientation de votre tablette ou de votre smartphone en cliquant sur démo orientation javascript.
Le code source html5 javascript :
<html>
<body>
<div id="portrait" style="width:600px;height:400px;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;border:2px solid #000000;text-align:center;font-size:100px;vertical-align:middle;display:none">
MODE PORTRAIT
</div>
<div id="paysage" style="width:600px;height:400px;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;border:2px solid #000000;text-align:center;font-size:100px;vertical-align:middle;display:none">
MODE PAYSAGE
</div>
</body>
<script>
if ( window.innerWidth > window.innerHeight ) {
document.getElementById("paysage").style.display = "block";
} else {
document.getElementById("portrait").style.display = "block";
}
</script>
</html>Simple non ?
La technique moderne
Cette technique consiste à utiliser les media queries CSS3 par le biais de javascript et la fonction matchMedia de l’objet window. , notamment la propriété orientation.
Pour connaître l’orientation d’un smartphone ou d’une tablette, il suffit d’interroger cette propriété comme suit.
var portraitOrientation = window.matchMedia("(orientation:portrait)");
if ( portraitOrientation.matches ) {
document.getElementById("portrait").style.display = "block";
} else {
document.getElementById("paysage").style.display = "block";
}Faites le test en rafraichissant la page après avoir changer l’orientation de votre tablette ou de votre smartphone en cliquant sur démo orientation javascript.
Le code source html5 javascript.
<html>
<body>
<div id="portrait" style="width:600px;height:400px;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;border:2px solid #000000;text-align:center;font-size:100px;vertical-align:middle;display:none">
MODE PORTRAIT
</div>
<div id="paysage" style="width:600px;height:400px;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;border:2px solid #000000;text-align:center;font-size:100px;vertical-align:middle;display:none">
MODE PAYSAGE
</div>
</body>
<script>
var portraitOrientation = window.matchMedia("(orientation:portrait)");
if ( portraitOrientation.matches ) {
document.getElementById("portrait").style.display = "block";
} else {
document.getElementById("paysage").style.display = "block";
}
</script>
</html>Détecter le changement de position à la volée
Dans les 2 précédents exemples, il fallait rafraichir la page pour changer l’affichage en fonction de l’orientation. Ce n’est pas le top, ni un usage courant : tout doit se faire dynamiquement sans rafraichissement de la page.
Lorsque vous changez l’orientation de votre smartphone, un évènement orientationchange se produit. Il suffit donc de l’intercepter et d’appeler une fonction chargée d’adapter l’affichage à l’orientation.
Dans l’exemple, on rend visible le div correspondant au mode d’affichage : par le biais du style display que l’on fixe à block.
Comme l’affichage est dynamique, il est aussi nécessaire de rendre invisible le 2ème div : par le biais du style display que l’on fixe à none.
Faites le test en changeant l’orientation de votre tablette ou de votre smartphone en cliquant sur démo orientation dynamique javascript.
<html>
<body>
<div id="portrait" style="width:600px;height:400px;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;border:2px solid #000000;text-align:center;font-size:100px;vertical-align:middle;display:none">
MODE PORTRAIT
</div>
<div id="paysage" style="width:600px;height:400px;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;border:2px solid #000000;text-align:center;font-size:100px;vertical-align:middle;display:none">
MODE PAYSAGE
</div>
</body>
<script>
window.onorientationchange = function() {
var portraitOrientation = window.matchMedia("(orientation:portrait)");
if ( portraitOrientation.matches ) {
document.getElementById("portrait").style.display = "block";
document.getElementById("paysage").style.display = "none";
} else {
document.getElementById("paysage").style.display = "block";
document.getElementById("portrait").style.display = "none";
}
}
</script>
</html>