title: viewport user-scalable=yes and media queries
body: <p>I took over the build of a website in which was NOT designed to be on mobile devices at all. The client needs to be able to at least navigate through the site via a mobile device so I am trying to make it so the site appears exactly the same on the mobile device as it does on the browser and just let the client pinch and zoom throughout it. I had to make some small adjustments via media queries but that's another story. </p>
  
  <p>The site looks great with <code>&lt;meta name="viewport" content="user-scalable=yes" /&gt;</code> but it doesn't look like any of my media queries are taking effect... When I put <code>width=device-width</code> in the meta tag the site blows up and looks like its displayed at 300% zoom. When I put any of the following <code>initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0</code> I get the same effect I do when I just put <code>width=device-width</code></p>
  
  <p>So far the only thing that has given me close to what I am looking for is <code>user-scalable=yes</code> alone in the meta tag with nothing else, but the media queries aren't taking effect. Is it required to have <code>width=device-width</code> or <code>initial-scale</code> for media queries?</p>
  
  <p>Here is the one media query I am using that is not taking effect:</p>
  
  <p><code>@media only screen and (max-width: 879px) {}</code></p>