iPhone 4 traps max-width:480px media queries

Question

An iPhone 4 with a resolution of 640×960 falls into media queries specified within:

@media only screen and (max-width:480px)

This media query is at the very end of my CSS stylesheet...

Above this query are those working great for iPad (1024) and Desktop, etc...

What am I missing??

I'd like the iPhone4 to respond to media queries specified earlier in the stylesheet, targetted as: (max-width:640px) instead, of course...

For the record, my viewport tag is currently:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 1

You've confused css px and display px. Which is understandable because they're both measured in px. Sigh.

From the point of view of css, a retina display is only 320px wide. However, it's pixel ratio is 2 meaning every 1px in css-land is really 2px on the display.

Taken from here you can use a different selector to identify retina displays :

@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}