title: @Media min-width & max-width
body: <p>I have this <code>@media</code> setup:</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, user-scalable=no" /&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>@media screen and (min-width: 769px) {
      /* STYLES HERE */
  }
  
  @media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
      /* STYLES HERE */
  }
  
  @media only screen and (max-device-width: 480px) {
      /* STYLES HERE */
  }
  </code></pre>
  
  <p>With this setup it works on the iPhone but it does not work in the browser.</p>
  
  <p>Is it because I already have <code>device</code> in the meta, and maybe have <code>max-width:480px</code> instead?</p>