css mediaquerie no iphone

[ericolvr 0]

Site

CSS

 

Vou postar uma parte do CSS

 

/*
@media (max-width: 320px) { 
#container{ 
	width: 292px;
	height: 100%;
	margin: 30px auto;
	text-align: left;
	background: #99CC00;

}

.item {
	width: 292px;
	float: left;
	overflow: hidden;
	margin: 2px 0;
	height: auto !important; 
}
}
*/

@media only screen and (max-device-width : 320px) {
#container{ 
	width: 292px;
	height: 100%;
	margin: 30px auto;
	text-align: left;
	background: #99CC00;
}


.item {
	width: 292px;
	/*float: left;*/
	text-align: center;
	overflow: hidden;
	margin: 2px 0;
	height: auto !important; 
}

 

 

O que estou fazendo de errado?

Alguém pode me dar uma força?

 

Obrigado e abraços

[Layo 10]

Entao nao sei c eh a melhor solucao mais acho q vai ajudar em vez de colocar @media tente usar assim na propria estrutura:

<link href="pequeno.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)">
<link href="medio.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:800px)">
<link href="grande.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)">