title: Iphone 5/SE CSS media query changes getting applied on Iphone 6/7/8 resolution as well
body: <p>Well, it's similar to <a href="https://stackoverflow.com/questions/30642326/my-iphone-6-gets-the-iphone-5-media-query">My iPhone 6 gets the iPhone 5 media query</a> ques, but I am still unable to figure out the answer.</p>
  
  <p>I have a CSS written in Iphone 5/SE media query as below : </p>
  
  <pre><code>'@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2)' : {
      shippingPrice : {
          fontSize : '12px',
          width : '29%'
      }
  }
  </code></pre>
  
  <p>The same CSS is getting applied for Iphone 6/7/8 devices as well. I am using <code>CSS in JS</code>. </p>