Www.bluebox-chartres.com en version mobile

Bonsoir,

Premier essai non concluant. Les médias query ajouté avec le code ci-dessus se greffe sur le CSS existant. En gros il va chargé le CSS de base puis modifier les attribues réglé différemment dans les médias query.

Avec mon premier essai qui est en ligne avec le code ci-dessous, je cache le #header, le #menu et le #footer. Je n'affiche que le #contenu.
J'ai ajouté un img { display:none; } pour virer toutes les images.
J'ai modifié toutes les largeurs en width:100%;

Malgré cela, l'affichage se fait toujours en grand comme si il chargé le site normal

- Peut-on charger deux fichiers complétement différents avec la condition média query plutot que d'avoir un même css commun?

- Peut-on chargé du html grace à du CSS? En gros, si je veux remplacer ton mon header par un simple logo sur la version mobile, comment charger une image qui n'est pas dans le html commun?

http://img257.imageshack.us/img257/7545/img0324.png

@media only screen and (max-device-width:481px), only screen and (max-width:481px)  { 
img { display:none; width:100%;}
body{ background: #006dd7; width:100%; }
#divprin { width:100%; font-size:1em; padding: 0 0.5em 0 0.5em; }
#header   { width:100%; display:none; height:60px; padding: 0; background: #006dd7 url("../images/logo-bluebox.png") 0 0 no-repeat;}
#menu       { width:100%; display:none; /*height:44px; padding: 0; background: #006dd7;*/}
#contenu { width:100%; overflow:hidden; padding: 0;background: #006dd7;}
#footer   { width:100%; display:none;  padding: 1em 0.5em 1em 0.5em; background: #006dd7; border-top:solid 1px #FF9900;}
#index-1 {  width:100%; float:none; }
#index-2 {  width:100%; display:none;  }
#index-3 {  width:100%; float:none; }
} 

Modifié par pika28 (24 Nov 2010 - 10:03)

En plus des css, tu dois ajouter une meta dans le head de ton document html :

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

…pour que le site s'affiche dans la surface visible et pas dans la largeur du viewport (plus large).

Pour les css, j'utilise le code suivant :

@media handheld, only screen and (max-device-width:500px), only screen and (max-width:500px), only screen and (-webkit-min-device-pixel-ratio: 2)
{
…
}

Le media handheld pour les vieux navigateurs, les media queries plus une media queries pour iphone/ipod 4.

Avantage de cette version, on peut voir ce que donne le site en version mobile en réduisant la fenêtre du navigateur en dessous de 500px (voir mon site).

P.S: c'est mieux de mettre la largeur des divs principaux sur auto et pas 100%.
Modifié par Patidou (24 Nov 2010 - 11:52)

Merci beaucoup, je vais tester ça des que possible

pika28 a écrit :

C'est à dire?

Que ton media query fonctionnait aussi sur les navigateurs de bureau.

pika28 a écrit :
Je viens d'essayer ton meta et ton media query, c'est au poil

Tant mieux.

Après diverse modification, ça commence à ressembler à quelque chose, enfin presque... Il y a un gros bug sous android.

Une idée?

Personne ne peut me faire de retour, je vais finir par croire que le dev mobile n'est pas un sujet au gout du moment

Android
http://img259.imageshack.us/img259/7492/androidl.th.gif

Iphone
http://img84.imageshack.us/img84/802/photon.th.png

Salut,

Ces images tu les sors d'où ? Comment as-tu testé ton site (émulateurs ou conditions réelles) ?

A l'heure actuelle, il faut bien que tu comprennes que tu n'obtiendras pas une compatibilité maximum en n'utilisant que les media queries.

Au boulot, j'ai la chance de pouvoir tester avec un iPhone, un Blackberry, un Nokia, un Acer et un HTC (de tête je suis incapable de citer les modèles), il n'y a que l'iPhone qui les comprend (comme le confirme ce tableau des compatibilités).

Je crois qu'il touche pas mal de gens avec ses medias queries, d'autant plus qu'il utilise l'historique handheld. Sur les mobiles où le navigateur n'est pas terrible, les gens se dépêchent d'installer Opera (mini ou mobile).

Bon sinon on dirait que la barre de navigation gêne un peu, il faudrait peut-être passer les éléments un en dessous de l'autre.

Patidou a écrit :
J'ai lu que -webkit-text-size-adjust était à éviter car ça fige la taille des caractères. Certaines personnes ont besoin de pouvoir agrandir la police pour pouvoir lire.

AMHA c'est mieux un classique et plus universel :

body {font-size: 80%;}

Ok, je te remercie. Je vais tester ça...

Patidou a écrit :
Pour le reste, je te dirai quoi plus tard…

Trop dur d'attendre, je suis un grand impatient, j'adore les critiques... lol