1485 sujets

Web Mobile et responsive web design

Problème d'affichage sur mobile

Bonjour à tous. J'ai un petit problème. En cours, nous avons un projet, qui implique de créer un site qui soit responsive, or, je suis censé m'occuper de cette partie. Le problème étant qu'ayant créer ma CSS spécifique pour le responsive, comme suit, la plupart des mobiles ne la prennent pas en compte, alors que lorsqu'un resize de la fenêtre de mon navigateur préféré (chrome) est fait, le site s'adapte parfaitement. J'ai pu jusqu'à lors tester mon site sur différents supports (HTC Trophy sous windows 7 mobile, iPhone 4 et en utilisant Opera mobile emulator), voici donc le code :


     @media screen and (max-width:500px) {
	body {
		width:100%;
	}

	#spotlight {
		background:url(../img/bg-spotlight-mobile.jpg) repeat-x;
		height:918px;
		width:100%;
	}

	#spotlight img {
		margin-left:145px;
	}

	#accroche h1 {
		font-size:30px;
		margin-left:20px;
		margin-top:-30px;
	}

	#accroche p {
		font-size:16px;
		margin-left:-100px;
		text-align:center;
	}

	#menu {
		top:286px;
		left:-9px;
	}

	#menu li {
		margin-bottom:25px;
	}

	#icones {
		margin-top:309px;
	}

	.icone {
		margin-left:18px;
	}

	.icone4 {
		margin-left:71px;
	}


}


Merci d'avance pour votre aide qui saura, j'en suis sûr, me permettre d'avancer dans mon projet. (Je précise que c'est la première fois que je touche aux media queries)
Modifié par Knozelfhoegtj (13 Jun 2012 - 15:07)
Essaye ça :

@media handheld, only screen and (max-device-width:500px), only screen and (max-width:500px), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {

…

}


Cette règle comprend les écrans de type retina (iPhone 4(s), etc).

edit : sans la page en ligne c'est difficile de dire où ça cloche… Smiley cligne
Modifié par Patidou (13 Jun 2012 - 15:15)
Je ne peux pas voir le code de ton site pour l'instant (iPhone) mais tu n'aurais pas oublié la meta viewport par hasard?
Modifié par Patidou (13 Jun 2012 - 15:36)
Je l'ai bien mise, la voici :

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


Maintenant, étant donné que ce fut la première fois que j'utilisais cette balise, je ne peux pas garantir à 100 % qu'elle soit bien écrite...
Je pensais justement changer pour un slider responsive... Je reviendrais vers vous en cas de soucis, mais en tous les cas, je vous remercie, j'ai pas mal appris et vous m'avez surtout beaucoup aidé.
Sujet clos
Aller à