title: Responsive web design css media queries and Iphone different resolutions
body: <p>I am using media queries on my app and it seems to work well and show up well in <a href="http://www.responsinator.com/" rel="nofollow">http://www.responsinator.com/</a> but when I view in a real iPhone 4 my webpage is not readable at all. It looks all zoomed in.</p>
  
  <p>Trying to find out the actual cause, it seems that responsinator shows iPhone 4 resolution as 320 x 480 whereas this website <a href="http://www.iphoneresolution.com/" rel="nofollow">http://www.iphoneresolution.com/</a> shows as 640×960. My iPhone looks to be at 640×960. How should I handle these cases in CSS media queries?</p>