title: Media Query for iPhone 4 and 4s
body: <p>Can we differentiate between 4 and 4s in css? I've a problem in the following code, please help to fix.</p>
  
  <pre><code>/* iphone 4S retina landscape, 3.5inch */
  @media only screen and (-webkit-min-device-pixel-ratio : 2) and (device-aspect-ratio: 2/3) and (orientation : landscape) {
  }
  
  /* iphone 4S retina portrait, 3.5inch */
  @media only screen and (-webkit-min-device-pixel-ratio : 2) and (device-aspect-ratio: 2/3) and (orientation : portrait) {
  }
  
  /* iphone 4 landscape, 3.5inch */
  @media only screen and (-webkit-min-device-pixel-ratio : 1) and (device-aspect-ratio: 2/3) and (orientation : landscape) {
  }
  
  /* iphone 4 portrait, 3.5inch */
  @media only screen and (-webkit-min-device-pixel-ratio : 1) and (device-aspect-ratio: 2/3) and (orientation : portrait) {
  }
  </code></pre>