1485 sujets

Web Mobile et responsive web design

Différence d'affichage Iphone PC

Bonjour,

Après avoir lu plusieurs sujets concernant le même probleme, j'ai trouvé diverses causes mais pas de solutions.

Toutes mes polices sont en CSS pixel, l'interligne, enfin toutes les dimensions. Iphone agrandi (ce qui me gène pas sur le principe) mais n'agrandis pas tous de la même façon. Je pense que les screenshots parlent d'eux même.

http://img541.imageshack.us/img541/2396/temptqi.jpg

hzzp://www.bluebox-chartres.com/
Modifié par pika28 (19 Nov 2010 - 11:30)
Salut,

pika28 a écrit :
Toutes mes polices sont en CSS pixel, l'interligne, enfin toutes les dimensions.
Quand on développe pour mobile, le pixel est à proscrire.

L'unité de référence est l'em (que j'utilise personnellement pour tout ce qui touche à la police et aux marges), ou le % (pour les images).
Donc si je comprends bien :
police : em
interligne : em
margin : em
padding : em
dimension image : %
dimension div : pixel

Autre chose à passer en em?

Dernière question, comment convertir? Je sais que l'em est relative au réglage du navigateur mais sur le principe d'une police réglée en "normal" ou "100%", comment convertir?
pika28 a écrit :
Dernière question, comment convertir? Je sais que l'em est relative au réglage du navigateur
Tout comme pixel

pika28 a écrit :
mais sur le principe d'une police réglée en "normal" ou "100%", comment convertir?
En général un peu à l'arrache ^^; Il doit exister des tablea des conversions, mais elles seront à base de 4 chiffres après la virgule (ce qui est idiot). Fait tes tests pour voir ce qui rend bien.
Je viens de faire les modifications nécéssaires :
- toutes les polices sont em (1em=16px par défaut)
- toutes les margin et padding sont en em (sauf mise en page header bgnd footer)
- L'interligne est en em.

Conclusion, j'ai toujours le même décalage (voir photo ci-dessus). Le problème vient de l'interligne qui diffère sous iphone par rapport au PC.

J'ai testé avec le bout de code ci-dessous et ca ne change rien :
* {line-height:1.3em}

Modifié par pika28 (19 Nov 2010 - 19:41)
pika28 a écrit :
J'ai testé avec le bout de code ci-dessous et ca ne change rien :

Essaie en modifiant ce bout de code comme suit :
body {
  line-height: 130%;
}

Modifié par Victor BRITO (20 Nov 2010 - 22:28)
Victor BRITO a écrit :

Essaie en modifiant ce bout de code comme suit :
body {
  line-height: 130%;
}


Bonjour, même en %, ça ne change rien, j'ai essayé avec safari et le navigateur de l'appli google, c'est pareil
Sujet clos
Aller à