title: css media queries conflicts in iPhone X and iPhone 6/7/8 plus view
body: <pre><code>/*iphone 6/7/8 plus*/
  @media screen 
  and (min-width : 414px) 
  and (max-width : 736px)
  and (-webkit-device-pixel-ratio : 3)
  and (orientation: portrait)
  {   
    #x-section-1 {
      margin-top: 274px!important; 
    }                
  }
  
  /*iphone x*/
  @media screen 
  and (min-width : 375px)
  and (max-width : 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait)
   {
    #x-section-1 {
      margin-top: 237px!important;
   }    
  }
  </code></pre>
  
  <p>The above is my media query.</p>
  
  <p>Using google dev tools for responsive testing. When I used iPhone X to test, it displayed correctly with the <code>margin-top</code> is <code>237px!important</code>. </p>
  
  <p>But when I used iPhone 6/7/8 plus to test, the <code>margin-top</code> value was still reference to iPhone X's <code>margin-top</code> value. </p>
  
  <p>How can I fix it?</p>