1381 sujets

Web Mobile et responsive web design

Pages :
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é. Smiley confused
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é. Smiley confused

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. Smiley cligne

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


Tant mieux. Smiley smile
Premier essai en ligne, pourriez vous me dire ce que vous en pensez. Je n'ai modifié que l'index pour le moment.
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). Smiley cligne
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. Smiley cligne
@Belig :
L'image de l'iphone est un screenshot de mon tel et l'autre provient d'une copie d'écran de l'émulateur SDK Android. Pourrais tu tester sur les différents mobiles de ton travail?

@Patidou :
Je me doutais que le probleme venait du menu car désactivé tour à tour Header, menu, contenu, footer et tous est ok quand le display:none le menu. Je pensais désactiver le JS du menu mais comment avec les média queries? ou alors dans le JS lui meme avec une condition du genre seulement actif au dessus d'une largeur de xxx pixel. Après j'avais pensé à un menu avec des sous menu mais je ne sais pas faire.

Avez vous une idée?

J'avais pensé à un menu style au féminin.com mais la c'est carement un autre site, c'est plus des media queries.
Accueil au feminin
menu au feminin
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 Smiley biggrin , 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?
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%;}


Pour le reste, je te dirai quoi plus tard… Smiley cligne
Modifié par Patidou (30 Nov 2010 - 11:31)
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… Smiley cligne

Trop dur d'attendre, je suis un grand impatient, j'adore les critiques... lol Smiley biggrin
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. Smiley smile

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

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)
Il me reste un dernier probleme à résoudre avec le menu qui bug avec JS activé. Je suis proche de zero en JS, je modifie par deduction. Essai avec firefox en reduisant la fenetre en dessous de 500px pour te rendre compte. Ca marche tres bien sous safari d'apple, sous android mais ca bug grave sous opera mini et sous blackberry.
Pages :