Pages pour appareils mobiles

Meta de base

Icone application

Ecran de lancement

L'ordre des consignes et la taille des images doivent être strictement respectés. (bandeau de 20px)

Plein écran

On peut savoir si on est en mode application par la variable: if (navigator.standalone)

Viewport

initial-scale=1 est nécessaire pour un bon affichage en mode paysage.

En CSS on peut utiliser les unités suivantes:

1vw: 1% viewport width (1vh pour height)
1vmin: 1vh ou 1vh (le plus petit des 2)
1vmax: 1vh ou 1vh (le plus grand)

Le Zoom peut aussi être contrôlé via minimum-scale et maximum-scale dans le meta tag viewport.

var metaTagViewport = document.getElementsByName('viewport')[0]; if (metaTagViewport !=null) metaTagViewport.setAttribute( 'content', 'device-width = '+viewport+', user-scalable=no');

Page qui donne le viewport

La barre d'URL peut être masquée en forçant la page à scroller d'un cran dès l'affichage.

Evenements

Certains évènements (où l'attribut TITLE) ne sont pas pris en charge si l'élément est non cliquable. Mais on peut forcer le comportement: <p title="infobulle sur iPhone !" onclick="void(0);">Mon paragraphe</p>

Mouseover et Mousemove ne réagissent pas car le mouvement du doigt sur l'écran fait défiler la page.
Keypress, Keyup et Keydown ne sont pas pris en compte hors des textareas.
Click, Mousedown et Mouseup sont étrangement appelés en même temps quand le doigt quitte l'écran.
Doubleclick ne se déclenche pas, le Double-Tap effectue un zoom quoi qu'il arrive et un event.preventDefault() n'y changera rien.
Le One-finger panning déclenche un onScroll une fois le mouvement stoppé.
Le Two-finger panning déclenche un mouseWheel si l'élément est scrollable.

if (window.TouchEvent)
		activerEvenementsTactiles();

function BlockMove(event) {
  // Ne pas déplacer la fenêtre!
	event.preventDefault() ;
 }

<body onorientationchange="myOrientationChangeFunction()"> En lisant window.orientation on a l'info sur l'orientation en cours (angle en degrés).

Exemple orientationchange

On peut empêcher la rotaion en utilisant CSS3: -webkit-transform: rotate(90);

Gestes

Voir le code source de l'exemple complexe ou l'exemple simple

Accéléromètre et gyroscope

window.DeviceMotionEvent = Accéléromètre.
DeviceOrientationEvent = Gyroscope (alpha (azimuth): axe des z de 0 à 360, beta (tangage): axe des x de -180 à +180 et gamma (roulis): axe des y de -90 + 90)


	if ('ondeviceorientation' in window) window.addEventListener('deviceorientation', function(event) {
		console.log (Math.round(event.alpha) +'°'); 
	}

Pour avoir l'accélération nette (sans la gravité) il faut un filtre (Highpass filter). event.acceleration.z

if (window.DeviceMotionEvent) { window.ondevicemotion = function(event) { ax = event.accelerationIncludingGravity.x; ay = event.accelerationIncludingGravity.y; az = event.accelerationIncludingGravity.z; } } Attention les y sont vers le haut de l'écran pour ce qui est de l'accélération contrairement aux ordonnées!

En complément:

Forum développeurs javascript pointu:
http://stackoverflow.com/questions/1273964/is-there-access-to-the-iphone-accelerometer-using-javascript
http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5
https://developer.apple.com/../DeviceMotionEvent.html (Highpass filter )

Styles

<link media="only screen and (device-width: 480px)" href="iphone.css" type= "text/css" rel="stylesheet">

@media screen and (device-width: 480px) { p { color: white; background-color: black; } } @media screen and (min-device-width: 481px) { p { color: black; background-color:white ; }} @media screen and (max-device-width: 480px) { #logo_gd {width:80% }}

Lancer les applications par défaut

YouTube, iTunes, Plans, SMS, Téléphone.

Safari iPhone intercepte certains liens et transmet la query string à l'application concernée. Voir aussi les URI avancées et la doc développeur Apple

jQTouch

La bibliothèque jQTouch, basée sur jQuery, permet c'ajouter des animations CSS3 facilement.

exemple jQTouch (fonctionne bien avec Safari)