28172 sujets

CSS et mise en forme, CSS3

Styles et compatibilité desktop/mobile

Bonjour,

Une question me turlupine depuis le début du week-end. Pour la faire court, je vais faire une appli mobile pour iPhone/Android (via PhoneGap, utilisant donc HTML/CSS). N'ayant pas tous les éléments pour commencé directement sur mobile, je me suis dit que j'allais faire les bases de l'appli sous Chrome desktop.
J'ai donc configuré ma fenetre chrome pour qu'elle fasse la résolution de mon iPhone4 (640*960). J'ai utilisé un reset.css. A prioris, je devrais donc avoir le même résultat sur les deux, mais c'est pas le cas.
Rien à voir en fait Smiley ohwell

Je comprends pas trop d'où vient le soucis dans la mesure où je travail avec deux résolutions identiques.


Ci-dessous, un screenshot de la version desktop:
http://s21.postimg.org/tdq9mx2hj/Screen_shot_2013_04_15_at_10_06_10.png

Et là, la version iPhone (sous Chrome):
http://s13.postimg.org/vekydwd2v/IMG_1077.png


Merci pour vos réponses!
Je pense avoir trouvé le soucis, ça viendrait du html où j'avais écris ça :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

J'ai changé par ça et ça a l'air de fonctionner : 
<meta name="viewport" content="user-scalable=0" />



Merci tout de même Smiley smile
Salut,

j'apporte un petit complément à ton problème.

La technologie Retina est la cause de ta différence et non ton viewport.
Si tu veux que ton navigateur desktop soit le plus fidèle à l’aperçu iPhone, base toi sur la largeur physique de l'écran, soit 320px et non 640.

Ju
Merci, je vais faire comme ça.
Est-ce une bonne idée de faire les premiers devs/intégration sur desktop pour récupérer par la suite sur mobile? Y'a des chances que j'ai de mauvaises surprises, n'est-ce pas?
Pour répondre à ta première question : non ce n'est pas gênant de développer ton site sur desktop dans un premier temps. Penses tout de même à contrôler ton boulot de temps en temps sur un mobile, au delà de la taille des écrans il y a une multitude de points à prendre en compte (tactile, roll-over...).

Pour ta seconde question : aurais-tu une url ? Sans ça ce n'est pas évident.

Petite idée : as-tu remis ton viewport initial ?

Petite autre idée : le retina, encore lui. Je n'ai pas de quoi tester sous la main mais essayes de voir si pour lui une font-size de 14px n'équivaut pas à 7px par exemple.
Modifié par JulienFouquet (15 Apr 2013 - 18:48)
Yep, tu peux y accéder par ici:
Tests

Le viewport, je l'ai laissé comme ça: 
<meta name="viewport" content="user-scalable=0" />
Essayes déjà de remettre ton viewport original (avec le device-width...).

Ensuite on creusera pour voir si cela vient aussi du Rétina.

PS : il manque les : dans l'url que tu as donné.
C'est chose faite maintenant.
Ok, donc en gros (juste pour être certains d'avoir saisi), si je teste la page sur Chrome desktop, je dois tester ça en résolution 320x480?
Ouep exactement.

Tu te cale toujours sur la largeur physique de tes devices. Le rétina ça ne vient qu'affiner la résolution des images.

Je reviens sur ma petite autre idée de toute à l'heure : sauf erreur de ma part, le rétina ne change pas l'aspect des textes mais seulement des images.
J'ai de la chance pour le coup, je n'utiliserai (à priori) aucunes images dans cette appli Smiley lol
Merci beaucoup, ça devrait m'aider en tous cas Smiley lol
Je ne connais pas cet émulateur mais avec Phone Gap tu peux publier ton appli et la tester sur tes machines reliées à ton pc. Rien n'est plus sûr.
Sujet clos
Aller à