Question

I’m using the iOS Simulator to test my responsive theme’s media queries for the various iOS devices but the below media queries aren’t rendering. I’ve referenced w3.org media queries standards plus this blog post, A Pixel Identity Crisis from A List Apart, and Mozilla’s blog post amongst a few others, but am not seeing what’s breaking the queries, do you?

/*-- iPhone 4, 4S Retina -----------------------*/

@media 
screen and (min-pixel-ratio:2) and (min-width:320px) and (max-width:600px),
screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px),
screen and (-o-min-pixel-ratio:2/1) and (min-width:320px) and (max-width:600px), 
screen and (min--moz-pixel-ratio:2) and (min-width:320px) and (max-width:600px),/* Firefox browsers prior to FF 16) */
screen and (min-resolution:2ddpx) and (min-width:320px) and (max-width:600px) {
   /*styles here */
}


/*------- iPhone 2G, 3G, 3GS  -------------*/
@media  
screen and (max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px),
screen and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px),
screen and (-o-max-device-pixel-ratio: 1/5) and (min-width: 320px) and (max-width: 600px),
screen and (max--moz-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px), /* Firefox browsers prior to FF 16) */
screen and (max-resolution: 1.5ddpx) and (min-width: 320px) and (max-width: 600px) {
   /*styles here*/
}

Answer 1

If you are only targeting ios (you don’t have to worry about opera/firefox) then you can safely shorten your media queries to something like:

/*-- iPhone 4, 4S Retina -----------------------*/
@media screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px) {
   /*styles here */
}

/*------- iPhone 2G, 3G, 3GS  -------------*/
@media screen and (min-width: 320px) and (max-width: 600px){
   /*styles here*/
}

It might also be a good idea to have (orientation: landscape) / (orientation: portrait) ones in there too if your site needs them.