1485 sujets

Web Mobile et responsive web design

Hello,

Je suis débutant dans le responsive design.
Voilà mon problème: J'ai fait quatre grilles pour mon site, qui sont alternées suivant la dimension de l'écran, cela marche très bien sur mon écran d'ordinateur Voir ici , mais sur iphone, la bonne grille apparaît belle et bien mais elle est toute petite, pas comme la redimension sur l'écran d'ordinateur Voir ici.
C'est surement tout bête mais je comprends pas..

Voici mon css:

body
{
	background: red;
}
#all
{
	width: 960px;
	height: 600px;
	background: url(img/marquage_large.png) repeat;
	margin: 0 auto;
}

@media (min-device-width:1024px) and (max-width:1010px),
       screen and (max-device-width:480px),
			 (max-device-width:480px) and (orientation:landscape),
       (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {
       
       #all
       {
       	width: 716px;
       	height: 600px;
       	background: url(img/marquage_medium.png) repeat;
       	margin: 0 auto;
       }
        
}
       
       
@media (min-device-width:1024px) and (max-width:768px),

       (max-device-width:480px) and (orientation:portrait) {
       

       #all
       {
       	width: 469px;
       	height: 600px;
       	background: url(img/marquage_iphone_large.png) repeat;
       	margin: 0 auto;
       }
       
}

@media (min-device-width:1024px) and (max-width:520px),

       (max-device-width:480px) and (orientation:portrait) {
       

       #all
       {
       	width: 233px;
       	height: 600px;
       	background: url(img/marquage_iphone_small.png) repeat;
       	margin: 0 auto;
       }


Merci déja de vos réponses !
Modifié par monski_4 (07 Mar 2012 - 09:14)
Victor BRITO a écrit :
Salut,

Voici une piste (notamment ce qui est indiqué en préambule).



Merci, je vais regarder ça et essayer de trouver la solution.
monski_4 a écrit :



Merci, je vais regarder ça et essayer de trouver la solution.



J'ai trouvé, il suffisait d'ajouter la ligne:

<meta name="viewport" content="width=device-width" />


Dans mon code.

Merci pour ton aide Smiley smile
Modifié par monski_4 (07 Mar 2012 - 09:13)