Reputation: 7547
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?
Upvotes: 3
Views: 1455
Reputation: 6800
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.
Upvotes: 6