Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • PHP5 avancé
  • Memento MySQL
  • Memento CSS 3
  • WordPress 3 100% pratique
  • Memento HTML5
Auteur
Pages :
magali_infographiste
#
61 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)

previews/42755-mobile.jpg previews/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)

^
JulienFouquet
#
95 Posts
Hello,

tu as déclaré ton viewport ?

Ju

^
magali_infographiste
#
61 Posts
oui, j'ai mis ça :
<meta name="viewport" content="width=device-width">
Mais pas certaine d'avoir compris comment ça fonctionnait...

^
rodolpheb
#
946 Posts
Bonjour,

Raphaël aide à bien comprendre le viewport : lien1 et lien2.

Pouvez-vous postez su code ou une page en ligne.

^
JulienFouquet
#
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 Smiley cligne

^
magali_infographiste
#
61 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 Smiley decu

^
JulienFouquet
#
95 Posts
Par simple curiosité, pourquoi un width auto sur le body ? Le 100% basique ne convient-il pas mieux ?

^
magali_infographiste
#
61 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% Smiley smile

^
rodolpheb
#
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?

^
magali_infographiste
#
61 Posts
J'ai mis min-width: auto;
il y en a quelques uns, mais c'est un site uniquement dédié mobile...

^
rodolpheb
#
946 Posts
Je parlais du min-width=1040px dans la feuille de style public.css. Smiley cligne

^
magali_infographiste
#
61 Posts
J'ai pas accès à la feuille de style public Smiley smile mais je l'ai annulée dans la main...en tout cas firebug me confirme ça...

^
JulienFouquet
#
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.

^
magali_infographiste
#
61 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 Smiley smile

^
JulienFouquet
#
95 Posts
L'initial-scale du viewport n'arrange rien ?

^
magali_infographiste
#
61 Posts
J'ai mis ça : <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Smiley ohwell

^
rodolpheb
#
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">


^
magali_infographiste
#
61 Posts
ça n'a aucun effet Smiley decu

^
JulienFouquet
#
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.

^
rodolpheb
#
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 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 :