Search code examples
cssmedia-queries

CSS media query not working on iphone 5

I am making use of css media queries to build a responsive site. Here is a page in question: http://sergedenimes.com/shop/.

I have used this query to activate style for smartpones:

    @media only screen 
and (max-width:640px){
    //styles
}

When I resize my browser the styles are picked up and I get the smartphone layout. However when I visit the page on my iphone 5 the media query seems to not be picked up. Any ideas why? I have another site that uses the same media query and it works fine.

Tested in Chrome and Firefox on mac, and Chrome and Safari on iphone.

Solution

  • You have no <meta name="viewport"> tag, so the iPhone is applying a scale to your page to fit the screen.

    Edit

    Kris Hollenbeck beat me to it. Try adding this tag:

    <meta name="viewport" content="width=device-width">