Version iPhone de mon site

Auteur	Pages : [>]
Nico3333fr	# 10 Mar 2010 - 22:59:24
353 Posts	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 ! In tartiflette we trust ! (ou May the reblochon force be with you si vous préférez)
353 Posts
Patidou	# 11 Mar 2010 - 11:46:40
2173 Posts	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) Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2173 Posts
Nico3333fr	# 11 Mar 2010 - 12:15:50
353 Posts	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) In tartiflette we trust ! (ou May the reblochon force be with you si vous préférez)
353 Posts
Patidou	# 11 Mar 2010 - 13:28:55
2173 Posts	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. Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2173 Posts
Patidou	# 11 Mar 2010 - 13:30:40
2173 Posts	Si tu es sur Mac, tu peux installer les outils de développement, il y a un émulateur iPhone. Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2173 Posts
Nico3333fr	# 11 Mar 2010 - 14:39:46
353 Posts	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) In tartiflette we trust ! (ou May the reblochon force be with you si vous préférez)
353 Posts
Patidou	# 11 Mar 2010 - 15:01:39
2173 Posts	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. Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2173 Posts
Patidou	# 11 Mar 2010 - 15:06:13
2173 Posts	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) Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2173 Posts
Nico3333fr	# 11 Mar 2010 - 15:42:43
353 Posts	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. In tartiflette we trust ! (ou May the reblochon force be with you si vous préférez)
353 Posts
Nico3333fr	# 11 Mar 2010 - 15:53:48
353 Posts	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) In tartiflette we trust ! (ou May the reblochon force be with you si vous préférez)
353 Posts
Mikachu	# 11 Mar 2010 - 16:49:14
C'est quand les vacances ? Modérateur 5136 Posts	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). Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !
C'est quand les vacances ? Modérateur 5136 Posts
Nico3333fr	# 11 Mar 2010 - 20:38:56
353 Posts	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... Modifié par Nico3333fr (11 Mar 2010 - 22:55) In tartiflette we trust ! (ou May the reblochon force be with you si vous préférez)
353 Posts
Mikachu	# 12 Mar 2010 - 15:15:17
C'est quand les vacances ? Modérateur 5136 Posts	Est-ce bien 480px de large, j'avoue que je connais pas la résolution de l'iphone, shame on me Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !
C'est quand les vacances ? Modérateur 5136 Posts
Laurie-Anne	# 12 Mar 2010 - 15:20:23
Modérateur 5736 Posts	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). Non !
Modérateur 5736 Posts
Mikachu	# 12 Mar 2010 - 16:00:22
C'est quand les vacances ? Modérateur 5136 Posts	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. Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !
C'est quand les vacances ? Modérateur 5136 Posts
Patidou	# 12 Mar 2010 - 16:28:16
2173 Posts	C'est 480px en mode paysage, 320 en mode portrait. Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2173 Posts
Nico3333fr	# 12 Mar 2010 - 17:02:08
353 Posts	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) In tartiflette we trust ! (ou May the reblochon force be with you si vous préférez)
353 Posts
Patidou	# 13 Mar 2010 - 08:55:45
2173 Posts	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. Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
2173 Posts
Laurie-Anne	# 13 Mar 2010 - 15:16:08
Modérateur 5736 Posts	C'est mieux, mais le cadre vert est bizarre. Le menu est également un peu petit. Non !
Modérateur 5736 Posts
Nico3333fr	# 13 Mar 2010 - 18:23:06
353 Posts	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) In tartiflette we trust ! (ou May the reblochon force be with you si vous préférez)
353 Posts
Pages : [>]