title: CSS media queries - min-device-width and max-device-width
body: <p>I have problem adding CSS for a specific device.</p>
  
  <p>I ran my app on these two simulator:</p>
  
  <ol>
  <li>width: 320 and height: 500</li>
  <li>width: 320 and height: 588</li>
  </ol>
  
  <p>Now, my problem is, the CSS always used is the second one : 320 x 588. I believe that it is because it qualifies with the <code>min-device-width</code> which is <code>320</code>. So how could I use the first CSS <code>320x500</code> with the device having width: 320 and height: 500?</p>
  
  <p>I am not really familiar with <code>min-device-width</code> and <code>max-device-width</code>. </p>
  
  <p>/* IOS ----------- */</p>
  
  <pre><code>@media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 500px) {
     //style here
  }
  
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 588px) {
     //style here
  }
  </code></pre>