Screen Orientation API : Démo HTML5
Mise à jour : 2017-01-22
Screen Orientation API
- screen.orientation.type (.angle) :
- portrait-primary : vertical avec les boutons en bas (0°).
- portrait-secondary : vertical avec les boutons en haut (180°).
- landscape-primary : horizontal avec les boutons à droite (90°).
- landscape-secondary : horizontal avec les boutons à gauche (270°).
- lockOrientation([orientations]) : bloque l'écran dans une liste de positions spécifiques :
- La page doit être en plein écran.
- À la liste d'orientations ci-dessus s'ajoute "portrait" et "landscape", qui valent à la fois "primary" et "secondary"
- unlockOrientation() : débloque l'orientation automatique de l'écran.
- onchange : est envoyé lorsque l'orientation change.
Notes sur le tuto
- Tournez votre écran pour constater la mise à jour de sa position et forcez l'orientation automatique.
- Article détaillé en anglais sur SitePoint :
- Limitations :
- IE 11/Windows 8.1 mobile et Firefox supportent une ancienne spécification, préfixée et qui ne retourne pas l'angle.
- IE 11 mobile retourne toujour "protait-primary" et ne force pas l'orientation "portrait-secondary".
- Voir aussi :
Exemple de code HTML5
Orientation automatique : <button onclick="screen.orientation.unlock(); document.webkitExitFullscreen()">Automatique</button><br> Orientation actuelle : <span id="std" class="ko">Screen Orientation API non supportée !</span><br> <script> std = document.getElementById("std") function getScreenOrientation(engine, type, angle) { engine.innerHTML = type + " (" + angle + "°)" engine.className = "ok" } webkitFullscreen = function(){document.documentElement.webkitRequestFullscreen()} webkitLock = function(o){screen.orientation.lock(o)} function setScreenOrientation(fullscreen, lock, orientation) { fullscreen() lock(orientation) } screen.orientation.addEventListener("change", function(){ getScreenOrientation(std, screen.orientation.type, screen.orientation.angle)}) getScreenOrientation(std, screen.orientation.type, screen.orientation.angle) </script> Forcez l'orientation : <button onclick="setScreenOrientation(webkitFullscreen, webkitLock, 'portrait')">Portrait</button> <button onclick="setScreenOrientation(webkitFullscreen, webkitLock, 'portrait-primary')">Portrait 1</button> <button onclick="setScreenOrientation(webkitFullscreen, webkitLock, 'portrait-secondary')">Portrait 2</button> <button onclick="setScreenOrientation(webkitFullscreen, webkitLock, 'landscape')">Paysage</button> <button onclick="setScreenOrientation(webkitFullscreen, webkitLock, 'landscape-primary')">Paysage 1</button> <button onclick="setScreenOrientation(webkitFullscreen, webkitLock, 'landscape-secondary')">Paysage 2</button><br> <br> <u>Préfixes</u> :<br> <br> Microsoft (11 ≤ Internet Explorer) :<br> Orientation automatique : <button onclick="screen.msUnlockOrientation(); document.msExitFullscreen()">Automatique</button><br> Orientation actuelle : <span id="ms" class="ko">Screen Orientation API non supportée !</span><br> <script> ms = document.getElementById("ms") msFullscreen = function(){document.documentElement.msRequestFullscreen()} msLock = function(o){screen.msLockOrientation(o)} screen.addEventListener("msorientationchange", function(){ getScreenOrientation(ms, screen.msOrientation, "?")}) getScreenOrientation(ms, screen.msOrientation, "?") </script> Forcez l'orientation : <button onclick="setScreenOrientation(msFullscreen, msLock, 'portrait')">Portrait</button> <button onclick="setScreenOrientation(msFullscreen, msLock, 'portrait-primary')">Portrait 1</button> <button onclick="setScreenOrientation(msFullscreen, msLock, 'portrait-secondary')">Portrait 2</button> <button onclick="setScreenOrientation(msFullscreen, msLock, 'landscape')">Paysage</button> <button onclick="setScreenOrientation(msFullscreen, msLock, 'landscape-primary')">Paysage 1</button> <button onclick="setScreenOrientation(msFullscreen, msLock, 'landscape-secondary')">Paysage 2</button><br> <br> Mozilla (Firefox) :<br> Orientation automatique : <button onclick="screen.mozUnlockOrientation(); document.mozCancelFullScreen()">Automatique</button><br> Orientation actuelle : <span id="moz" class="ko">Screen Orientation API non supportée !</span><br> <script> moz = document.getElementById("moz") mozFullscreen = function(){document.documentElement.mozRequestFullScreen()} mozLock = function(o){screen.mozLockOrientation(o)} screen.addEventListener("mozorientationchange", function(){ getScreenOrientation(moz, screen.mozOrientation, "?")}) getScreenOrientation(moz, screen.mozOrientation, "?") </script> Forcez l'orientation : <button onclick="setScreenOrientation(mozFullscreen, mozLock, 'portrait')">Portrait</button> <button onclick="setScreenOrientation(mozFullscreen, mozLock, 'portrait-primary')">Portrait 1</button> <button onclick="setScreenOrientation(mozFullscreen, mozLock, 'portrait-secondary')">Portrait 2</button> <button onclick="setScreenOrientation(mozFullscreen, mozLock, 'landscape')">Paysage</button> <button onclick="setScreenOrientation(mozFullscreen, mozLock, 'landscape-primary')">Paysage 1</button> <button onclick="setScreenOrientation(mozFullscreen, mozLock, 'landscape-secondary')">Paysage 2</button>
Démonstration du résultat HTML5
Orientation automatique :
Orientation actuelle : Screen Orientation API non supportée !
Forcez l'orientation :
Préfixes :
Microsoft (11 ≤ Internet Explorer) :
Orientation automatique :
Orientation actuelle : Screen Orientation API non supportée !
Forcez l'orientation :
Mozilla (Firefox) :
Orientation automatique :
Orientation actuelle : Screen Orientation API non supportée !
Forcez l'orientation :
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script> isItemSupported("screen.orientation") isItemSupported("screen.msOrientation") isItemSupported("screen.msLockOrientation", true) isItemSupported("screen.msUnlockOrientation", true) isItemSupported("screen.mozOrientation") isItemSupported("screen.mozLockOrientation", true) isItemSupported("screen.mozUnlockOrientation", true) </script>