Ce script vous permet de déterminer et de gérer l'orientation d'un iPhone ou d'un iPod Touch grâce à la variable window.orientation et à l'évènement window.onorientationchange.
Exemple page-iphone-orientation.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> window.onorientationchange & window.orientation </title>
<script type="text/javascript">
window.onorientationchange = function() {
if(window.orientation !== undefined) {
document.getElementById('value-1').innerHTML = window.orientation;
switch(window.orientation) {
case 0 :
document.getElementById('value-2').innerHTML = 'Portrait - Normal';
break;
case 90 :
document.getElementById('value-2').innerHTML = 'Paysage - Dans le sens <strong>contraire<\/strong> des aiguilles d\'une montre.';
break;
case -90 :
document.getElementById('value-2').innerHTML = 'Paysage - Dans le sens des aiguilles d\'une montre.';
break;
case 180 :
document.getElementById('value-2').innerHTML = 'Portrait - Renversé';
break;
}
} else {
/* Vous n'utilisez ni un iPhone, ni un iPod Touch... */
alert('Votre navigateur web ne supporte pas window.orientation');
}
}
window.onload = window.onorientationchange;
</script>
</head>
<body>
<h1>window.onorientationchange & window.orientation</h1>
<p>window.orientation = <span id="value-1"></span> // <span id="value-2"></span></p>
<p>Cette page ne fonction qu'avec les iPhone et les iPod Touch.</p>
</body>
</html>
Ce script pourrait aussi servir à détecter si le navigateur utilisé est bien un navigateur Safari iPhone / iPod Touch.
Jeu de briques
Snake
Pacman
Bubble