Supporté par ChromeSupporté par FirefoxSupporté par EdgeNon supporté par Safari/iOS Screen Orientation API : Démo HTML5

Mise à jour : 2017-01-22
Cette API permet de connaître l'orientation de l'écran, d'être informé quand elle change et de la forcer.

Screen Orientation API

Notes sur le tuto


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 &le; 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>		

Can I Use screen-orientation? Data on support for the screen-orientation feature across the major browsers from caniuse.com.