title: CSS media query for iPhone XR doesn't work?
body: <p>I'm working on a hybrid mobile app using Phonegap.</p>
  
  <p>And everything works fine apart from one issue which only exist on the <code>iPhone XR</code>.</p>
  
  <p>The issue doesn't exist on iPhone X or iPhone XS etc.</p>
  
  <p>Basically, my CSS media query doesn't work on (it doesn't do anything) on iPhone XR.</p>
  
  <p>This is what i am using for <strong>iPhone XR</strong>:</p>
  
  <pre><code>/* iPhone XR */
  @media only screen 
      and (min-device-width: 414px) 
      and (min-device-height: 896px) 
      and (-webkit-device-pixel-ratio: 2) 
      and (orientation: portrait) { 
      /* my styles goes here */
  
  
  
  }
  </code></pre>
  
  <p>Is there something that I am missing and why is this media query doesn't do anything on on iphone xr?</p>
  
  <p>Could someone please advice on this issue?</p>
  
  <p>Thanks in advance. </p>
  
  <p>EDIT: </p>
  
  <p>The following CSS media query works fine on iphone x and iphone xs max:</p>
  
  <pre><code>    /* iphone x */
  @media only screen 
      and (device-width : 375px) 
      and (device-height : 812px) 
      and (-webkit-device-pixel-ratio : 3) {
  
  
  }
  </code></pre>