@media works on browser window resize, but not on mobile phone

Question

SOLVED: Tom: You were so right. Unfortunately WordPress function wp_head() was adding the width=1100 because of a plugin. Thanks! I'm working on a new responsive website, but can't seem to get the @media query to work. It does work when resizing the browser window on my desktop, but it won't work on my ipad, iphone or android phone. What am I doing wrong?! Here the link: http://demo.mindspins.com/atmnieuw/ Here's the link to the CSS: http://demo.mindspins.com/atmnieuw/wp-content/themes/atm/css/dynamic.php Thanks in advance! On request the CSS code: ``` @media all and (max-width: 1460px) { .site-width{ width: 1199px; } .main-width{ width: 719px; } } @media all and (max-width: 1220px) { .site-width{ width: 959px; } .main-width{ width: 479px; } #page-title h1.thetitle{ font-size: 20px; line-height: 24px; } .sidebar .widget a.form-button-link, .sidebar .widget span.form-button-link{ font-size: 20px; line-height: 24px; } } @media all and (max-width: 980px) { .site-width{ width: 719px; } .m…

Accepted Answer

On looking again, when using my iPhone 4S and the Remote Web Inspector introduced in iOS 6, I couldn't find any styles for anything below `max-width: 1200px`, even though they are in the CSS file. I don't know why this is.

Also, I wrote a blog post about Responsive design and Media Queries a few months, you can read it here if you wish. Not saying you're not good at media queries (it's a very nice site!) just hope it will be an interesting read for you :)

EDIT: just looking at your site again, I noticed in the `head` (right at the bottom) you have this code:

```
meta name="viewport" content="width=1100"
```

This could be why the styles weren't applying at anything below a screen width of 1100px or 1200px. Take this out and try it again.

@media works on browser window resize, but not on mobile phone

Solution

Problem