Comment faire une page web compatible iPhone

**Rollois** · 10/06/2009, 17h16

Bonjour,

Je suis intéressé à rendre ma page web facile d'accès pour les iPhone. Donc si un user load ma page avec Safari sur son iPhone, la page chargera plus rapidement car le contenu sera moins lourd et le display (width) sera ajusté pour celui-ci.

Par exemple, si on load facebook ou twitter dans notre iPhone, ces pages sont beaucoup moins lourdes à charger et plus facile à utiliser que si on les chargait normalement (charger normalement = même chose que sur un pc).

Je cherche sur Google et sur votre site un tutoriel quelconque qui explique BIEN comment faire cela. Et je trouve rien de bon. La seule chose qui semble me donner un idée à peu près est le lien suivant: http://groups.google.com/group/iphon...b605e5d43c0b26
Mais la discussion ne semble pas donner une conlusion définitive sur le sujet.

J'aimerais savoir si l'un de vous connaît un livre/tutoriel quelconque pour m'aider la dedans.

Je sais pas comment ils font, mais on dirait que les page web détecte que tu regarde leur page avec un iPhone et il ajuste le display pour (comme une redirection vers iphone.google.com quand tu visites www.google.com avec ton iPhone).

Je me demande aussi si les changements que je vais apporter s'appliquerait pour les autres types de téléphones? Genre blackberry. Ou il faut que j'ajuste le display pour les 100 types de display de téléphones qui existent sur le marché (chacun ayant son width).

Merci de l'aide.

**12monkeys** · 10/06/2009, 20h40

Bonsoir

Tu peut essayer deux choses : soit les types de média pour appliquer une css spécifique à ta page http://www.la-grange.net/w3c/html4.01/types.html#h-6.13 ; soit de détecter le type de navigateur et/ou le système d'exploitation pour faire de même : activer une css spécifique... En php : http://php.developpez.com/faq/index....versionbrowser et http://php.developpez.com/faq/index....oncepts_typeos ou en javascript : http://javascript.developpez.com/faq...vig#navigateur

**Rollois** · 10/06/2009, 21h10

Merci de la réponse. Je ferai des testes et je saurai définitivement si l'utilisateur qui regarde mon site est sur un mobile ou pas.

Pour la deuxieme partie de ma question, j'aurais besoin de savoir les dimension exacte à donner à nos page web et la meilleur façon de le faire. Tu me mentionnes le CSS, certain mentionne de mettre <meta /> quelquechose... entre les <head></head>.

En passant, il a une erreur sur ce tutoriel http://php.developpez.com/faq/index....oncepts_typeos

Il manque une parenthèse fermante à la ligne de code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$user_agent = getenv("HTTP_USER_AGENT";

Je me permet de le dire car tu sembles être un modérateur.
Merci!

**Rollois** · 10/06/2009, 21h26

Bon, c'est effectivement facile de savoir si le user est sur un iPhone ou pas.

$user_agent = getenv("HTTP_USER_AGENT"); et un strpos("iPhone") et le tour est joué.

Il me reste à connaître les bon settings d'affichage sur un iPhone.

**12monkeys** · 10/06/2009, 21h27

Envoyé par Rollois

Pour la deuxieme partie de ma question, j'aurais besoin de savoir les dimension exacte à donner à nos page web et la meilleur façon de le faire. Tu me mentionnes le CSS, certain mentionne de mettre <meta /> quelquechose... entre les <head></head>.

Les balises meta pour faire une redirection ? Oui en effet : http://cyberzoide.developpez.com/html/meta.php3#refresh.

Si c'est pour faire comme Google ça va aboutir au même effet : rediriger vers un nouveau site, c'est bien, mais celui ci utilisera aussi du css pour la mise en forme...

Pour les tailles du site, il faut utiliser la méthode empirique : tester, je ne sais pas quelle taille fait l'écran du iphone...

Envoyé par Rollois

En passant, il a une erreur sur ce tutoriel http://php.developpez.com/faq/index....oncepts_typeos

Il manque une parenthèse fermante à la ligne de code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$user_agent = getenv("HTTP_USER_AGENT";

Je me permet de le dire car tu sembles être un modérateur.
Merci!

Merci du retour, j'ai transmis...

**Rollois** · 10/06/2009, 21h36

Ce que je veux dire par le méta c'est ceci:
<meta name="viewport" content="width=320">
Apparament que c'est bon, mais je sais pas exactement ce que c'est cette ligne de code la et je sais pas non plus si c'est bon.
Je vais chercher sur le site de Apple, peut-être y a-t-il un document qui mentionne la meilleur façon de procéder pour faire ce que je veux faire.

hmmm... un site de référence met cette ligne de code

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

et quand je regarde dans un Safari iPhone c'est très bien.
La page est: http://www.appcubby.com/m/gascubby.html#_home
Je vais analyser leur css et js... quand on click sur les liens, la page bouge de droite à gauche... je comprends pas comment il fait ça.

**Macmillenium** · 10/06/2009, 21h46

Bonsoir,

Pour cibler l'Iphone et les autres appareils supportant le media handheld, il est possible d'exécuter des requêtes pour tester le type de média (Media Queries, un module CSS3), par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Grâce aux Media Queries, une requête va s'exécuter pour charger le fichier css-media-handheld.css si le viewport du périphérique ne dépasse pas 480px de largeur, ce qui est le cas de l'iphone par exemple.

IE ne supporte pas les Media Queries, tu peux donc l'exclure via un simple commentaire conditionnel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css"  media="handheld, only screen and (max-device-width: 480px)"  href="css-media-handheld.css"  />
<!--<![endif]-->

=> Si différent de IE

**Rollois** · 10/06/2009, 21h53

wow, cette bizarre ligne de code "media="handheld, only screen and (max-device-width: 480px)"" vérifie si je suis sur un handled? C'est ben nice CSS3.

Merci de l'info supplémentaire!

**Macmillenium** · 10/06/2009, 22h03

Envoyé par Rollois

wow, cette bizarre ligne de code "media="handheld, only screen and (max-device-width: 480px)"" vérifie si je suis sur un handled?

C'est plutôt :

Envoyé par Macmillenium

si le viewport du périphérique ne dépasse pas 480px de largeur, ce qui est le cas de l'iphone par exemple.

J'ai indiqué handheld pour cibler également les appareils qui supportent ce type de média.

Vu que l'iphone supporte le JavaScript, tu peux aussi utiliser la méthode classique en détectant la taille du viewport en JS et faire une simple instruction pour charger la CSS dédier aux petits écrans, si par exemple la largeur du viewport = 480px.

Un peu de lecture

**TekP@f** · 15/06/2009, 17h44

Salut à tous,

Je me permets d'intervenir dans le post pour avoir qq infos supplémentaires.
J'ai le même besoin que Rollois mais généralisé à tous les types de mobile. J'ai bien compris qu'on pouvait détecter le navigateur, l'OS ... Seulement, comment sélectionner la feuille de style à appliquer selon la taille du mobile.
J'ai trouvé cette source qui donne une vision des mobiles sur le marché par rapport à leur taille (http://mobiforge.com/designing/story...e-screen-sizes) et j'avais également vu cette ressource pour définir des feuilles de style selon qu'on soit sur mobile ou pas (http://blog.britoweb.net/post/2009/0...-d-utilisation)

Si je comprends bien tout, il existe en gros 3 tailles différentes de mobile (4 avec l'Iphone), il faut donc construire 3 ou 4 feuilles CSS. Mais comment les appliquer comme il faut selon la taille ?

J'avais pensé un truc de ce genre :

Avec des CSS qui s'annulent les uns les autres. Mais certains navigateurs ne supportent pas la clause 'only screen'. Donc comment faire ?

**Rollois** · 15/06/2009, 18h49

Est-ce que tes pages sont en php?
Si tu peux détecter le OS, donc (peut-être..) le type de handled (par exemple le iPhone le type de OS c'est "iPhone") et bien avec des if and else tu affiche seulement LE bon css.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
if(OS="iPhone")
  echo '<link rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 320px)" href="css-media-handheldIPHONE.css" />';
else if(OS="handheld")
  echo '<link rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 128px)" href="css-media-handheld1.css" />';
else
  echo etc...

**TekP@f** · 15/06/2009, 20h02

Mes pages sont en JS. Mais la détection d'OS ne résoudra pas mon problème il me semble.
Un OS peut être le même avec une taille d'écran différent non ? Je me trompe peut-être, je ne suis pas expert.

Sinon, je viens de faire qq tests concluants :

J'ai bien la feuille de style mobile2.css qui est prise en compte sur un nokia "classique" 128px, et sur Iphone, c'est la feuille mobile.css uniquement.
Je dois faire des tests plus complets, mais ça semble fonctionner.

Ce qui me fait peut, c'est quand je lis l'article cité précédemment (http://www.alistapart.com/articles/r...ile-stylesheet) : il existe de nombreux cas => avec ou sans handleId, avec ou sans Query Support
Ca peut vite être le bazar !

Ca m'étonne qu'il n'y ait pas déjà une méthode reconnue existante.

EDIT : autre raison pour laquelle je ne souhaite pas utiliser la détection d'OS, la maintenance. A chaque nouveau device, il faudra faire la mise à jour. Alors qu'une nouvelle taille d'écran, c'est moins courant.

**Rollois** · 15/06/2009, 20h56

kk,

bien quand je fais en php ceci: $user_agent = getenv("HTTP_USER_AGENT");

$user_agent me donner "iPhone", donc je peux savoir si la personne a un iPhone sur ma page web.

J'aurais pas du dire "OS".

Mais je sais pas si getenv("HTTP_USER_AGENT"); donner par exemple "Palm PRE" si c'est bien un Plam PRE et Nokia N450 si etc...
Je ne peux pas le tester et effectivement je cherchais une façon officiel et tester pour faire cela.

**TekP@f** · 15/06/2009, 22h20

Envoyé par Rollois

kk,

bien quand je fais en php ceci: $user_agent = getenv("HTTP_USER_AGENT");

$user_agent me donner "iPhone", donc je peux savoir si la personne a un iPhone sur ma page web.

J'aurais pas du dire "OS".

Mais je sais pas si getenv("HTTP_USER_AGENT"); donner par exemple "Palm PRE" si c'est bien un Plam PRE et Nokia N450 si etc...
Je ne peux pas le tester et effectivement je cherchais une façon officiel et tester pour faire cela.

Je verrais ça demain et je te tiens au courant alors.

**TekP@f** · 16/06/2009, 09h48

Salut,

Je viens de tester ça (pour info, en JSP, la commande c'est request.getHeader("USER-AGENT")). J'ai bien tout le détail du mobile :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Nokia6212 classic/2.0 (05.16) Profile/MIDP-2.1 Configuration/CLDC-1.1

Donc on peut effectivement s'en sortir en considérant tous les types de mobile.

Mais quand on regarde ce lien (http://mobiforge.com/designing/story...e-screen-sizes), on peut voir qu'il existe uniquement 4 tailles d'écran : 128, 176, 240 et 320 (=IPhone). Du coup, je me demande quelle est la meilleure méthode. Celle que j'ai un peu testé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<link rel="stylesheet" href="src/css/noyau.css" media="screen" />
<link rel="stylesheet" href="src/css/mobile.css" media="handheld and (max-device-width:480px), only screen and (max-device-width:480px)" />
<link rel="stylesheet" href="src/css/mobile2.css" media="handheld and (max-device-width:240px), only screen and (max-device-width:240px)" />

Dans ce cas, il n'y aurait que 4 tests à faire dépendant de la taille d'écran.

Ou plutôt, tester chaque configuration de téléphone.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<%
String strOS = request.getHeader("USER-AGENT")
 
if strOS = "IPhone" then
%>
<link rel="stylesheet" href="src/css/IPhone.css" media="screen" />
<%
else if strOS = "Nokia6212" then
%>
<link rel="stylesheet" href="src/css/Nokia6212.css" media="screen" />
...

Là, je ne connais pas le nombre de mobiles, mais ça fait pas mal de tests avec en plus des mises à jour très régulières.
On peut certainement optimiser en prenant une feuille de style par défaut et ne testant que les cas où il faut une feuille de style spécifique. Mais pas de chance, actuellement, on est en phase de transition. On arrive sur des SmartPhone et il y aura tous les nouveaux cas à traiter (IPhone, Blackberry, le nouveau LG, Android ...).

Perso, j'opterai plutôt pour la première méthode, avec une intégration de la seconde méthode pour les cas particuliers. Qu'en pensez-vous ?

**TekP@f** · 16/06/2009, 11h05

Bon, je n'aurai pas eu besoin de beaucoup de tests pour voir les limites de ma première méthode ...

Sur Blackberry, ça pose problème.

Donc au final, je pense qu'il faut faire un mix des 2 solutions. La première permet de rendre le site générique pour tout mobile, la seconde permet de compléter pour les cas particuliers comme le blackberry qui ne supporte ni le handheld ni le media queries.

**Rollois** · 16/06/2009, 13h30

TekP@f connais-tu les font-size recommandé, ou autre caractéristique de CSS spécifique pour les mobile? Ou tu as fais du "essaie-erreur" pour les trouver?

Merci.

**TekP@f** · 16/06/2009, 14h23

Il y a ce lien qui décrit les différentes taille existantes :

http://mobiforge.com/designing/story...e-screen-sizes

Mais il n'y a pas de détail pour chaque mobile. A part ça, je n'ai rien.

**Macmillenium** · 16/06/2009, 14h30

Que des complications ...

Tout d'abord, il faut savoir que le cross-browsing devrait être prévu dès le départ, un balise sémantique et valide (le respect des règles syntaxiques de la DTD) accompagné d'un document CSS optimisé et propre garanti déjà un maximum de compatibilité avec les différents Agents Utilisateurs que ce soit desktop ou mobile browser.

Pour le reste, c'est de l'optimisation, un appareil mobile n'a pas la même puissance qu'un ordinateur de bureau, il faudrait donc faire une mise en page "light", sans flottants, avec des font-size en em (ce qui répond à ta question, Rollois), des boites de blocs en % etc. (Il existe des tas de tutos sur les bonnes pratiques).

L'intérêt est de créer une seule feuille de style pour tous les appareils mobiles (iphone, Smartphone (comme blackberry), Pocket PC etc.).

Les résolutions de ce type de périphérique varient entre 240*320 et 480*800, d'où cette requête de Média :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ensuite, si l'Agent Utilisateur n'implémente pas le fameux module Média Queries mais arrive à lire dans le Média handheld, il serait donc possible de viser ce type de média :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<link rel="stylesheet" type="handheld" href="css-media-handheld.css" />

Pour fusionner les deux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

A savoir que certains Agents utilisateurs sont capables de lire dans le Média screen et handheld, la feuille css-media-handheld.css devrait donc contenir des correctifs.

Pour le reste voir du coté viewport meta tag.

**Macmillenium** · 16/06/2009, 14h38

Envoyé par Rollois

TekP@f connais-tu les font-size recommandé, ou autre caractéristique de CSS spécifique pour les mobile? Ou tu as fais du "essaie-erreur" pour les trouver?

Chaque navigateur intègre une feuille de style par défaut qui contient toutes les propriétés/valeurs appliquées par défaut sur les différents éléments.

Pour faire un reset le mieux serait de déclarer un font-size:62,5% ou font-size:77% sur le body et utiliser des valeurs en em (qui seront calculées à partir du font-size du body) pour le reste des éléments.

Le navigateur calcule par la suite la bonne valeur.

Comment faire une page web compatible iPhone

HTML

Discussions similaires

Partager

Partager