Responsive web design css media queries and Iphone of different resolutions

I am using media queries in my application and it seems to work well and display well at http://www.responsinator.com/ , but when I view a real iPhone 4 my webpage is not readable at all. It looks all enlarged.

Trying to figure out the actual reason, it seems that the respondent is showing the iPhone 4 resolution as 320 x 480, whereas this website http://www.iphoneresolution.com/ shows it as 640 × 960. My iPhone looks like 640 × 960. Like me should handle these cases in CSS media queries?