Version iPhone de mon site

Bonsoir à tous,

j'ai essayé de créer une CSS spéciale iPhone et autres smartphones (dérivée de mon dernier graphisme) sur mon site personnel, je l'ai intégrée via media-query.

Gag... je n'ai pas d'iPhone sous la main pour la tester , pourrais-je avoir vos retours et conseils sur le résultat ?

D'avance merci pour vos retours !

Ben heu, à part l'ajout d'un média handhelld, je ne vois aucun media queries... Donc ça ne marche pas. Je crois que c'est à toi que j'avais donné un lien vers vers le site ALA non? Le voici.

Pour tester les media queries, il suffit de rétrécir la largeur de la fenêtre du navigateur (non IE).
Modifié par Patidou (11 Mar 2010 - 11:49)

Patidou a écrit :
Ben heu, à part l'ajout d'un média handhelld, je ne vois aucun media queries... Donc ça ne marche pas. Je crois que c'est à toi que j'avais donné un lien vers vers le site ALA non? Le voici.

Bin si, j'ai rajouté ça dans mon code :

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

Et je propose la même en media handheld. (le même fonctionnement que celle d'Alsa, qui fonctionne très bien par ailleurs)

Voici le résultat sur iPhone :





Il y a un problème quelque part... Comme je te le disais: en réduisant la fenêtre de ton navigateur tu devrais voir la mise-en-page changer.

Si tu es sur Mac, tu peux installer les outils de développement, il y a un émulateur iPhone.

Merci pour les "captures d'écrans", si j'ose dire.


Malheureusement non, je ne suis pas sous Mac.

Curiosité : j'ai testé ça sous Opéra via la prévisu petit écran (la CSS handheld est la même), et ça rend nickel. J'en déduis que ça n'est pas la CSS qui est en cause, mais plutôt l'appel à ces dernières.
Y a qqch qui ne plait pas à Safari.

La seule différence avec celles d'Alsa qui marchent très bien :

<link rel="stylesheet" type="text/css" href="http://www.alsacreations.com/css/styles20091013.css" />
<link rel="stylesheet" type="text/css" href="http://www.alsacreations.com/css/handheld.css" media="handheld" />
<!--  MediaQuery pour iPhone, Google, WebKit -->
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="http://www.alsacreations.com/css/handheld.css" type="text/css" rel="stylesheet" />

et mes déclarations CSS :

 <link rel="stylesheet" type="text/css" href="/style/ND/ND.css" media="screen, projection" title="defaut" />
 <link rel="stylesheet" type="text/css" href="/style/iND/iND.css" media="handheld" />
<!--[if !IE]>-->
 <link rel="stylesheet" type="text/css" href="/style/iND/iND.css" media="only screen and (max-device-width: 480px)" />
<!--<![endif]-->

C'est que celles d'Alsa ne spécifient pas d'attribut title (pas de CSS favorite), et que la CSS principale ne précise pas de media (c'est une CSS persistante tous médias confondus si j'ai bien suivi).

Donc, soit ça vient des titles, soit de la déclaration de la CSS principale que j'affecte au media screen et projection.

-j'ai viré les title de mes CSS, Opéra et son rendu petit écran n'y voit toujours aucun problème. Quid de l'iPhone ?
Modifié par Nico3333fr (11 Mar 2010 - 14:41)

En tout cas l'organisation de tes css est bizarre, on ne devrait trouver dans iND.css que les changements par rapports à la css principale (media all) alors qu'on a l'impression que tu repart à zéro.

C'est un coup d'œil vite fait, je me trompe peut-être.
Modifié par Patidou (11 Mar 2010 - 15:06)

Patidou a écrit :
En tout cas l'organisation de tes css est bizarre, on ne devrait trouver dans iND.css que les changements par rapports à la css principale (media all) alors qu'on a l'impression que tu repart à zéro.

C'est un coup d'œil vite fait, je me trompe peut-être.

C'était effectivement ma logique : séparer totalement mes CSS (principales et Iphone), afin de ne pas faire interférer mes styles alternatifs (qui peuvent passer en style principaux) avec la CSS pour iPhone.


Je vois qu'en calquant mes CSS sur celles d'Alsa, j'arrive à reproduire sous Opéra le bug que tu me signales sous iPhone. Je vais travailler dessus.

Bon, faisons clair, je ne peux pas, si je veux garder mes styles alternatifs, passer ma CSS principale pour tous les medias. Avec mes 20+ CSS alternatives, c'est ingérable, j'ai besoin d'avoir mes CSS bien distinctes qui ne s'entrechoquent pas (même si effectivement ça a d'autres avantages façon Alsa).

Par contre, je pense qu'une détection via PHP du user agent de l'iphone me permettrait d'éviter ce genre de désagrément : ainsi la CSS spéciale iPhone ne viendrait pas mettre la panique pour mon style-switcher en PHP.

Je fais qq essais !

EDIT : apparemment, ça devrait marcher correctement... un petit testeur le temps que je m'offre un Ipod touch ?
Modifié par Nico3333fr (11 Mar 2010 - 16:06)

Salut,

En bref car sur l'iPhone :
- par défaut ton site n'occupe pas tout la largeur de l'écran même vertical.
- lisibilité des boutons une peu limite (typo trop petite et trop fine perturbée par les effets visuels derrière).

Est-ce bien 480px de large, j'avoue que je connais pas la résolution de l'iphone, shame on me

Mikachu a écrit :
Est-ce bien 480px de large, j'avoue que je connais pas la résolution de l'iphone, shame on me

Oui et non puisqu'on peut faire "basculer" la bête

Le plus simple pour une version iphone c'est encore de ne pas mettre de largeur et de préciser une font pas trop petite (même si on peut zoomer).

Laurie-Anne a écrit :
Oui et non puisqu'on peut faire "basculer" la bête

Oui on peut faire basculer la "bête" (je te rassure l'i-phone ne mord pas), mais si la bannière ne prend déja pas toute la largeur en vertical, en horizontal encore moins. Donc il y a bien une résolution minimale en largeur. Mais je ne sais de combien de pixels.

C'est 480px en mode paysage, 320 en mode portrait.

Damned, je n'y comprenais rien... j'ai pourtant spécifié une largeur de 480px...

(attention, c'est vendredÿ !!! mode accent londonien)

Bon, j'ai mené l'enquête (difficile de travailler sur une CSS dont je ne peux voir le résultat, pas pu me procurer d'Iphone ou d'Ipod), vu que les indices logiques ne sont pas probants comme dirait Sherlock Holmes, je suis passé aux indices illogiques.

Le témoin Opéra en mode handheld n'a pas été concluant.

En fait, après un passage sous Firefox en mode border-box (merci webdevelopper toolbar) et un changement de user-agent (merci user agent switcher), j'ai pu constater que ce sont les h1 qui posaient problème... une bête taille en px que je n'avais pas changée.
Elémentaire mon cher Chris Pederick.

Normalement, c'est fixé. Un petit test "silvouplé" ? (j'adapterai les tailles de fonte plus tard)

C'est mieux, mais le cadre vert est bizarre. Le menu est également un peu petit.

C'est un premier tir, je compte bien l'améliorer... mais dès que j'aurais un iBidule pour tester directement, car développer ça à l'aveuglette, c'est un peu too much à mon goût. Normalement, Lundi j'ai un iPod touch.

Par contre, je ne comprends pas, quand vous parlez de virer les les tailles, c'est pour le body ou pour le reste ?

Si je regarde celle d'Alsa (je m'en inspire pas mal, car je l'ai testée sur un iPhone, et elle est remarquablement bien foutue), elle le spécifie surtout pour le body, quid ???
Modifié par Nico3333fr (13 Mar 2010 - 18:23)