Untitled Document
Optimiser ses applications Web pour iPhone ou iPod Touch (2)

En savoir plus

 

 

Masquer la barre d'URL

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

 

<body onload="window.scrollTo(0, 1)">


Afficher une infobulle

L'attribut title ne produit par défaut aucun effet. Il faut un peu forcer le destin pour que le comportement standard se déclenche. Ajouter un onclick par exemple.

 

<p title="infobulle sur iPhone !" onclick="
void(0);">Mon paragraphe</p>

Changer les valeurs du Viewport en cours d'exécussion

Le metatag viewport peut être contrôlé par getElementById.

 

<name="viewport" id="viewport" content="user-scalable=yes" />
document.getElementById("viewport").setAttribute
("content", "user-scalable=no;", false);

Faire un lien vers un numéro de téléphone

Il est aussi possible de faire des liens directement vers des numéros de téléphone.

 

<a href="tel:0612102132">06.12.10.21.32</a>

 

 

Faire un lien vers une carte GoogleMap

Ce type de lien ouvre l'adresse dans l'application built-in GoogleMap de l'iPhone. Sur l'iTouch, Safari s'ouvre comme un site normal.

 

<a href="http://maps.google.com/maps?q=paris">Paris</a>

 

 

Faire un lien vers un vidéo YouTube

Un lien de ce type vers une vidéo YouTube ouvre l'interface vidéo.

 

http://www.youtube.com/watch?v={youtube video id}

 

 

Rendre des champs de saisie "intelligents"

Il est possible d'activer l'autocorrection ou l'autocapitalisation lors de la saisie des champs texte.

 

<input autocorrect="on" />
<input autocapitalize="on" />

 

 

Ajouter un "Webclip"

La dernière version 1.1.3 du firmware permet aux utilisateurs d'ajouter un icône de raccourci (appelé WebClip bookmark) à la page d'ouverture. Pour que votre application propose ce nouvel icône à l'utilisateur, il suffit d'ajouter le code ci-dessous dans le head de votre page HTML. L'icône doit être un PNG de 57x57 pixels. Safari ajoutera lui-même les effets de lumière et de réflection.


<link rel="apple-touch-icon" href="/icone.png"/>
 

JDN Développeur Envoyer Imprimer Haut de page