My iPhone thinks it's 980px wide

Question

I'm trying to create a set of three very simple media query's to handle a range of screen sizes. Here's what I came up with, after a bunch of headscratching:

@media all and (min-width: 0px) and (max-width: 480px)  { styles here }  
@media all and (min-width: 481px) and (max-width: 1023px)   {  styles here } 
@media all and (min-width: 1024px) {  styles here } 

This works as I expected in browsers, but when I point my iphone at it, it insists on displaying the syles for the medium size. Playing with the numbers, I found that only with a max-width of 980px does the iphone respond to the styles within that query.

Note that I used "all" on these queries to rule out anything to do with whether or not to code "handheld" or "screen, handheld" etc. Trying to simplify to help me understand the problem.

I thought it might have had something to do with the contents of the page I was developing, so I created a no-content test page to try to pin down the problem. It's at:

http://rgdaniel.com/test-mediaquery.php

If I look at that page with my desktop browsers, it behaves as expected when I resize the window larger and smaller. But the iPhone reports my "medium res" message at any specified max-width under 980px. Any help appreciated, thanks in advance.

Answer 1

When using media queries you need to add this to your head tag.

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

This allows the website to detect that it is being used on a device.

You can also do this,

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

This part, user-scalable=0; prevents the user from zooming with their fingers and is useful if you have position: fixed elements.