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)

Ah, j'avais pas fait attention que ton site s'affichait en version mobile avec la fenêtre du navigateur en dessous de 481px. Désolé.
Modifié par Patidou (24 Nov 2010 - 12:48)

Patidou a écrit :
Ah, j'avais pas fait attention que ton site s'affichait en version mobile avec la fenêtre du navigateur en dessous de 481px. Désolé.

C'est à dire?

Je viens d'essayer ton meta et ton media query, c'est au poil

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).

Bonjour, je viens de mettre en ligne une nouvelle mouture du menu mobile qui me parait mieux. Qu'en pensez vous? Voir les 3 premiers screenshot.

Autrement, il me reste un petit bug de taille de police en mode paysage, les tailles de police augmentent mais pas tous, que qui donne un rendu vilain... Voir les 2 derniers screenshot au niveau de legend des encadres.

http://img574.imageshack.us/img574/7857/imageg01.jpg

http://img139.imageshack.us/img139/1416/imagepz.jpg

http://img204.imageshack.us/img204/9534/imagezhe.jpg

http://img207.imageshack.us/img207/9609/imagext0.jpg

http://img825.imageshack.us/img825/9822/imagenf0.jpg
Modifié par pika28 (30 Nov 2010 - 07:53)

Tu peux ajouter une MQ supplémentaire pour les retouches en mode paysage :

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

Modifié par Patidou (30 Nov 2010 - 11:07)

Tu as été plus rapide que moi , j'allais écrire :

Merci Alsacreation encore une fois, je viens de trouver dans la source css du site :

@media only screen and (max-device-width:640px) and (orientation:landscape)  {
	body {
		-webkit-text-size-adjust: 80% !important;
	}
}

Et pour le menu, qu'en penses tu?

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

body {font-size: 80%;}

Cela ne fonctionne pas avec 1em, 80%, 50%, ca ne change pas la taille de la police, étrange...

Apparemment tu as trouvé la solution à ton problème.

Pour le reste je n'ai pas grand chose à dire au niveau technique, le design c'est pas trop mon truc.

P.S. : on dirait que la propriété -webkit fixe la taille quand elle est exprimée en pixels, pas en pourcents.
Modifié par Patidou (30 Nov 2010 - 17:17)