Jusqu’à présent, je n’avais pas trouvé d’intérêt à porter mon site sur iPhone et sur toute version mobile en général. En effet, il s’affichait correctement à quelques imperfections graphiques prêts. Mais après réflexion, je me suis dit qu’il serait mieux de créer une version plus adaptée.
J’ai choisi de développer cette spécificité en CSS. J’aurai pu créer une nouvelle application web spécifique à l’iPhone (comme Facebook mobile par exemple) mais ce n’était pas forcément utile. CSS a donc été la solution simple et rapide.
J’ai donc organisé mes styles dans cet ordre, ordre qui est très important :
- Le style screen pour l’affichage sur les écrans classiques
<link media="screen and (min-device-width: 481px)" href="screen.css" type="text/css" rel="stylesheet" />
<!-- CSS Hack --> ...
A noter que l’on prive les écrans iPhone et iPod avec cette condition :
- La déclaration spécifique à Internet Explorer
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" href="/assets/css/style-ie.css" type="text/css" media="screen" />
<![endif]-->
- Le style handheld pour les mobiles
<link media="handheld" href="handheld.css" type="text/css" rel="stylesheet" />
- Le style print pour l’impression
<link media="print" href="print.css" type="text/css" rel="stylesheet" />
- Et la dernière déclaration qui nous intéresse, la version iPhone et iPod
C’est la déclaration type pour insérer un style propre à l’iPhone.
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="handheld.css" media="only screen and (max-device-width: 480px)" />
<!--<![endif]-->
La feuille de style handheld.css comporte des déclarations avec une largeur maximum de 480px, certaines parties ne sont pas affichées, etc… C’est tout ! Ce qui est souligné dans l’article c’est donc bien la disposition des déclarations des feuilles de style. La version iPhone est la même que la version mobile.
On peut aussi rajouter des balises meta spécifiques, ces balises définissent de nombreuses options propres à l’iPhone. Pour cela un peu de lecture : ici.
L’inconvénient de cette solution c’est que des traitements métier peuvent être fait inutilement. Dans mon cas, j’effectue des tests sur l’user agent de l’internaute afin de réduire certains traitements.
2 commentaires
Super intéressant ton article Surtt que je cherche un article dans Google et le 5eme lien c ton blog c propre !!! A bientôt et merci pr ce post… Il me servira surment
héhé meci
N’hésites pas si tu veux me poser des questions hin !