Responsive web design css media queries and Iphone different resolutions

3
votes

I am using media queries on my app and it seems to work well and show up well in http://www.responsinator.com/ but when I view in a real iPhone 4 my webpage is not readable at all. It looks all zoomed in.

Trying to find out the actual cause, it seems that responsinator shows iPhone 4 resolution as 320 x 480 whereas this website http://www.iphoneresolution.com/ shows as 640×960. My iPhone looks to be at 640×960. How should I handle these cases in CSS media queries?

1
htmlcssresponsive-design
@kleinfreund: I don't have anything like this. Should I add that? – Jack
The iPhone has a screen resolution of 320x480 at 163 ppi as does the iPhone 2 and 3. The iPhone 4 has 640 × 960 at 326 ppi, and the iPhone 5, 1,136 × 640 at 326 ppi. – Mick Jones
@Jack Yes, try it out please. – kleinfreund
@kleinfreund: Thanks! that helped. – Jack
Just so you know, whilst the iphone 4 resolution is 640 x 960, the default for websites on the iphone is 320 x 480 – Ryan McDonough

1 Answers

6
votes

Add the viewport meta tag to the head-area of your html files:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

This code makes your website scale properly.