Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

My iPhone thinks it's 980px wide

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.

like image 366
rgdaniel Avatar asked Nov 13 '13 04:11

rgdaniel


1 Answers

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.

like image 57
Josh Powell Avatar answered Oct 03 '22 06:10

Josh Powell