1486 sujets

Web Mobile et responsive web design

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

Pages :
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)

upload/42755-mobile.jpg upload/42755-width320.0.jpg

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 Smiley smile
Modifié par magali_infographiste (05 Mar 2013 - 10:26)
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 Smiley cligne
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?
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.
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 Smiley smile
votre viewport (width=device-width, initial-scale=1) va générer des bugs.

Testez : 
<meta name="viewport" content="initial-scale=1.0">
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.
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 Smiley decu ) 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)
Pages :
Sujet clos
Aller à