problem z Media Queries

[korykora]

witam czy mozecie przetestowac przykladowa stronke na swoich urzadzeniach?
zrobilem cos takiego:

index.css

* {margin:0; padding:0;}
body
{
background-color:yellow;
text-align:center;
font-family:lucida, arial, sans-serif;
margin-left:auto;
margin-right:auto;
}

@media screen and (min-width: 1024px) {
#main
{
width:100%;
height:100%;
background-color:red;

}
#main p
{
font-size: 20px;
}
}


@media only screen and (min-width : 321px) and (max-width : 500px){
/*landscape*/
#main {
width:100%;
height:100%;
background-color:blue;
}
#main p
{
font-style: bold;
}
}

@media only screen and (max-width : 320px) {
/*portrait */
#main {
width:100%;
height:100%;
background-color:green;
}
#main p
{
font-style: italic;
}
}

na symulatorch internetowych wszystko wyswietla sie prawidłowo tzn odpowiednie tło pod tekstem do odpowiedniej rozdzielczosci, niestety na prawdziwym iphonie wyswietla mi sie jedynie tekst. Co robie nie tak?

korykora.cba.pl

[korykora]

chyba sam rozwiazałem problem