Web MobileiPhone
Site Web pour iPhone ou iPod touch
Site pour iPhone ou iPod touchAprès les sites adaptés pour les mobiles, voici les sites optimisés pour l'écran iPhone ou iPod touch.
Pour être visible sur un iPhone, votre site doit-être non seulement réalisé en XHTML strict, mais surtout - et on s'en doutait un peu - adapté à la taille de l'écran (idéal: 320px de large sur 356px de haut). Cette taille doit-être confirmée dans le head avec la balise meta "viewport": <meta name="viewport" content="width=320;" />
Un site compatible iPhone doit aussi être adapté aux fonctionnalités supportées par le navigateur embarqué (Safari Mobile). Voir l'exemple d'interface iPhone du site Dailymotion.com et les WebApps présentées par Easy-Micro.
Exemple de source pour iPhone (à sélectionner)
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<title>Easy-Micro pour iPhone</title>
<link rel="apple-touch-icon" type="image/png" href="icone_iphone.png">
<link media="only screen and (max-device-width: 480px)" href="style1.css" type="text/css" rel="stylesheet" >
<link media="screen and (min-device-width: 481px)" href="style2.css" type="text/css" rel="stylesheet" >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width = 320" />
</head>
<body>Patali, patala...</body>
</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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<title>Easy-Micro pour iPhone</title>
<link rel="apple-touch-icon" type="image/png" href="icone_iphone.png">
<link media="only screen and (max-device-width: 480px)" href="style1.css" type="text/css" rel="stylesheet" >
<link media="screen and (min-device-width: 481px)" href="style2.css" type="text/css" rel="stylesheet" >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width = 320" />
</head>
<body>Patali, patala...</body>
</html>
Pour être compatible iPhone, votre site doit être adapté aux fonctionnalités supportées par le navigateur embarqué Safari mobile : XHTML Strict, CSS 2, JavaScript, DOM 2, AJAX. Ce qui implique qu'il doit-être non seulement réalisé en XHTML strict, mais surtout - et on s'en doutait un peu - adapté à la taille de l'écran (idéal: 320px de large sur 356px de haut). Cette taille doit-être confirmée dans le head avec la balise meta "viewport" (voir ci-dessous). Voir l'exemple d'interface iPhone du site Dailymotion.com. La base du développement est de privilégier l'utilisation du CSS (sans exagéger:-).
Quelque balise spécifique seront cependant utilisée. Voici une liste de code spécifique pour créer un site pour iPhone :
• Définir la taille de l'application (taille idéal : 320 pixel)
<meta name="viewport" content="width=320;" />
• Taille dynamique
<meta name="viewport" content="width=device-width" />
• Icône de votre site
Pour que l'icône de votre site, soit visible sur l'écran iPhone, il doit s'appeler "apple-touch-icon.png", doit avoir comme taille 57 x 57 pixel et doit être enregistré à la racine de votre site (soit votre page web):
<link rel="apple-touch-icon" href="apple-touch-icon.png"/ />
• Lien automatique vers numéro de téléphone
L'iPhone est capable d'appeler automatiquement un numéro de téléphone à partir d'un lien hypertexte si celui-ci est rédiger comme ceci: <a href="tel:33556244156">33556244156</a>
Différents articles
• Libération Expresso (site iPhone de Libération)
• Site iPhone de Google
• Optimiser ses applications Web pour iPhone ou iPod Touch 1
• Optimiser ses applications Web pour iPhone ou iPod Touch 2
• Convertisseur de vidéos pour iPhone et iPod.
