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!

Comment faire une page web compatible iPhone

HTML

Vue hybride

Discussions similaires

Partager

Partager