title: 3 media queries for iphone portrait, landscape and ipad portrait
body: <p>I have tried the different combinations of <code>width</code> &amp; <code>device-width</code> but on the iPhone in landscape this code never turns the background red;</p>
  
  <p>I am having problem when I have more than 1 media query. See this <a href="http://jsfiddle.net/7UGsK/" rel="nofollow">JSfiddle example</a> the div background is never green unless you remove the last media query</p>
  
  <p>This is what I would like 3 different media queries which target:</p>
  
  <blockquote>
    <ol>
    <li>both smartphones and tablets(portrait only). This will be where I have all my generic styles for responsive layout</li>
    <li>width: 320px - 479px - this will apply to small screens, such as iphone in portrait only</li>
    <li>width: 480px - 640px - this will apply to larger screens such as iphone in landscape and ipad in portrait. Not ipad in landscape. </li>
    </ol>
  </blockquote>
  
  <p>Note this is for a HTML email so its not possible to use JS. </p>
  
  <pre><code>@media only screen and (max-width: 640px) {
      body { padding: 10px !important }
  }
  /* Small screen */
  @media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
      body { background: blue !important }
  }
  /* iPhone landscape and iPad portrait */
  @media only screen and (max-device-width: 480px) and (max-device-width: 640px) {
      body { 
         background: red !important 
         -webkit-text-size-adjust:none; 
      }
  }
  </code></pre>
  
  <p>Reference: <a href="http://css-tricks.com/snippets/css/media-queries-for-standard-devices/" rel="nofollow">http://css-tricks.com/snippets/css/media-queries-for-standard-devices/</a></p>