1486 sujets

Web Mobile et responsive web design

Version iPhone de mon site

Pages :
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 Smiley murf , pourrais-je avoir vos retours et conseils sur le résultat ?

D'avance merci pour vos retours ! Smiley cligne
Ben heu, à part l'ajout d'un média handhelld, je ne vois aucun media queries... Smiley ohwell 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... Smiley ohwell 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 :

upload/4635-photo.jpg

upload/4635-photo2.jpg

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. Smiley cligne
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. Smiley eek
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)
Toujours la même chose sur iPhone. C'est normal que ça marche sur Opera : il gère le média handheld, contrairement aux autres, donc c'est pas sûr que tes media queries fonctionnent. Smiley cligne
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. Smiley cligne
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. Smiley cligne


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. Smiley sweatdrop


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 ! Smiley biggol

EDIT : apparemment, ça devrait marcher correctement... un petit testeur le temps que je m'offre un Ipod touch ? Smiley lol
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).
Merci pour le test.

Bizarre, pourtant, j'ai bien spécifié 480px de large dans ma CSS pour le body...

EDIT : Quelqu'un a une idée ? Je sèche un peu... Smiley bawling
Modifié par Nico3333fr (11 Mar 2010 - 22:55)
Mikachu a écrit :
Est-ce bien 480px de large, j'avoue que je connais pas la résolution de l'iphone, shame on me Smiley biggol
Oui et non puisqu'on peut faire "basculer" la bête Smiley langue

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 Smiley langue

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. Smiley cligne
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. Smiley sweatdrop
Elémentaire mon cher Chris Pederick. Smiley jap

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

Smiley biggol
Comme Laurie-Anne l'a dit, le mieux c'est d'enlever la taille (width: auto), ainsi ça prendra toute la largeur qu'il soit en mode portrait ou paysage ou que l'appareil ait une résolution plus faible.
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. Smiley lol

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)
Pages :
Sujet clos
Aller à