18

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.

LihO
  • 41,190
  • 11
  • 99
  • 167
rgdaniel
  • 183
  • 1
  • 4
  • Why do you need to combine min-width and max-width? I've only seen min-width increasing progressively being used. – Aram Kocharyan Nov 13 '13 at 05:02
  • Also see http://stephen.io/mediaqueries/ if you're targeting mobiles specifically. – Aram Kocharyan Nov 13 '13 at 05:05
  • I first used only max-width on the first one, then min-width on the other two. It was still giving me problems as described, so I played around with the queries. This is just where I landed. – rgdaniel Nov 13 '13 at 05:06
  • Yes, I did use those queries from stephen.io exactly as coded at one point, could not get things to behave... – rgdaniel Nov 13 '13 at 05:07
  • 1
    Did you include this, ``? I don't see it in the link you have and if you did not, you need to include this in your `head` tag. – Josh Powell Nov 13 '13 at 05:08
  • No problem, if it helps I'll add it as the answer. This allows the website to know it is being used on a device and not a desktop. First time with `media queries` for me lead to a lot of headaches until I found out I forgot a major part of them. – Josh Powell Nov 13 '13 at 05:12
  • Hallelujah, that did the trick! THANK YOU!! – rgdaniel Nov 13 '13 at 05:12
  • You are very welcome, I included an answer with a little bit of extra info. If the answer fixed your problem then please check it as the accepted answer. Best of luck! – Josh Powell Nov 13 '13 at 05:14

1 Answers1

42

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.

Josh Powell
  • 6,219
  • 5
  • 31
  • 59