title: Media query ipad vs iphone4
body: <p>I am using the media query in css to differentiate iphone and ipad</p>
  
  <p>Here's my code:</p>
  
  <pre><code>/* iphone 3 */
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) { ... }
  
  /* iphone 4 */
  @media only screen and (min-device-width : 640px) and (max-device-width : 960px) and (orientation:portrait) { ... }
  
  /*iPad styles*/
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { ... }
  
  /* i have the same for landscape */
  </code></pre>
  
  <p>Now I have a resolution conflict, the iphone 4 use the same resolution as the ipad and vice versa.</p>
  
  <p>How can I fix this?</p>