[Résolu] Site dédié mobile, largeur auto pas prise en compte..

Auteur	Pages : [>]
magali_infographiste	# 05 Mar 2013, 10:25:39
55 Posts	Bonjour actuellement je fais mes premiers test de site dédié mobile ! Et aille. Malgré les articles et recherches, je coince. Sur navigateur ordinateur fixe ça fonctionne, mais sur mobile tout est cassé...(j'ai testé sur i-phone et android) En gros la largeur ne semble pas être prise en compte, (width: auto)... Qu'ai je loupé ? Merci par avance si vous pouviez me mettre sur une piste Modifié par magali_infographiste (05 Mar 2013 - 10:26)
55 Posts
JulienFouquet	# 05 Mar 2013, 11:21:08
95 Posts	Hello, tu as déclaré ton viewport ? Ju
95 Posts
magali_infographiste	# 05 Mar 2013, 11:23:04
55 Posts	oui, j'ai mis ça : <meta name="viewport" content="width=device-width"> Mais pas certaine d'avoir compris comment ça fonctionnait...
55 Posts
rodolpheb	# 05 Mar 2013, 11:31:18
946 Posts	Bonjour, Raphaël aide à bien comprendre le viewport : lien1 et lien2. Pouvez-vous postez su code ou une page en ligne.
946 Posts
JulienFouquet	# 05 Mar 2013, 11:36:32
95 Posts	Une histoire de scale. Rapidement, je dirais que ce viewport fonctionne : <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Le maximum-scale a ses détracteurs, mais je n'en fait pas parti
95 Posts
magali_infographiste	# 05 Mar 2013, 11:39:43
55 Posts	Malheureusement mon code est désastreusement "bordélique", car je suis en mode test, et je n'ai pas nettoyé la css initiale. Mais si ça peut aider : http://couleursdelorient.dev.pilotsystems.net/ merci pour les liens, j'avais déjà lu la page "Comprendre le Viewport dans le Web mobile" mais ça reste floue pour moi
55 Posts
JulienFouquet	# 05 Mar 2013, 11:47:11
95 Posts	Par simple curiosité, pourquoi un width auto sur le body ? Le 100% basique ne convient-il pas mieux ?
95 Posts
magali_infographiste	# 05 Mar 2013, 12:02:06
55 Posts	Oui j'avais mis un 100% à la base, mais j'ai changé pour voir si ça bougeait les résultats. Je remets en 100%
55 Posts
rodolpheb	# 05 Mar 2013, 12:02:34
946 Posts	Le min-width=1040px du body empêche un redimensionnement inférieur (si vous l'ôter ça fonctionne). Je ne vois pas de média-queries?
946 Posts
magali_infographiste	# 05 Mar 2013, 12:04:59
55 Posts	J'ai mis min-width: auto; il y en a quelques uns, mais c'est un site uniquement dédié mobile...
55 Posts
rodolpheb	# 05 Mar 2013, 12:19:29
946 Posts	Je parlais du min-width=1040px dans la feuille de style public.css.
946 Posts
magali_infographiste	# 05 Mar 2013, 12:23:30
55 Posts	J'ai pas accès à la feuille de style public mais je l'ai annulée dans la main...en tout cas firebug me confirme ça...
55 Posts
JulienFouquet	# 05 Mar 2013, 12:27:13
95 Posts	Quand je cherche une mystérieuse pétouille j'essaye de cibler la/les balises coupables. As-tu essayé, de ne pas afficher tout le html pour voir quelle div pose ce problème ? Tu peux faire ça à base de display:none tout simplement. Ça pourrait te permettre de mettre le doigt directement sur le problème.
95 Posts
magali_infographiste	# 05 Mar 2013, 12:30:26
55 Posts	Pour le moment j'ai pensé que c'était dû à mon image qui est flexible, j'ai fait un test mais rien, effectivement je vais devoir reprendre un a un les éléments. Mais je pensais plus à une erreur sur le viewport, d'où mon appel à l'aide
55 Posts
JulienFouquet	# 05 Mar 2013, 12:52:01
95 Posts	L'initial-scale du viewport n'arrange rien ?
95 Posts
magali_infographiste	# 05 Mar 2013, 13:57:37
55 Posts	J'ai mis ça : <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
55 Posts
rodolpheb	# 05 Mar 2013, 14:01:53
946 Posts	votre viewport (width=device-width, initial-scale=1) va générer des bugs. Testez : `<meta name="viewport" content="initial-scale=1.0">`
946 Posts
magali_infographiste	# 05 Mar 2013, 14:04:38
55 Posts	ça n'a aucun effet
55 Posts
JulienFouquet	# 05 Mar 2013, 14:11:26
95 Posts	Sans décortiquer tout ton site je n'ai pas trop de pistes. Peut-être que tu peux bidouiller ce genre de media-queries : `@media only screen and (-webkit-min-device-pixel-ratio: 2) { body{width:1136px;} }` Etant donné que ton problème apparaît sur ton iPhone & pas forcément sur tous les mobiles. Tu peux peut-être essayer de corriger ça via cette media-querie. J'ai déjà eu un soucis que j'ai résolu de la sorte, c'est bancal mais ça peut servir de rustine.
95 Posts
rodolpheb	# 05 Mar 2013, 15:19:13
946 Posts	Ta constatation sur Firebug m'a induit en erreur car au départ en testant sur safari le problème venait et vient toujours de ta feuille de style public.css (dont tu n'as pas accès ) avec un min-width:1040px. J'ai testé sur FF c'est OK. Par contre sur Saf et donc sur Iphone il y a le même problème qui peut être résolu en créant une règle à l'aide d'une média querie pour faire sauter ce min-width. Edit : je rejoins Julien Modifié par rodolpheb (05 Mar 2013 - 15:20)
946 Posts
Prévenir un modérateur Pages : [>]

Répondre au sujet