@lucy24, You seem to be coming from exactly the same direction as me with your layout issue. I have found a particularly interesting article on responsive layout: [webdesign.tutsplus.com ], discussing the meta viewport HTML element. I've not had chance to fully test it's suggestions yet but it answers a lot of questions for me. However, I don't think the article is the be-all and end-all because it doesn't seem to take HD screens into consideration (I stand to be corrected on this).
With regard to HD screens, I notice in your retina-specific @media query you didn't include the standards-compliant
only screen and (min-resolution: 192dppx). In theory, this should talk to Mozilla and Opera - bearing in mind some folk may have Mozilla or Opera driven HD phones.