title: Media Query to differentiate Google Pixel 1/2 vs Google Pixel XL vs Google Pixel 2 XL
body: <p>Im writing a cordova app and need to isolate these google phones to adjust styling</p>
  
  <p>given this:</p>
  
  <p><a href="https://i.stack.imgur.com/5CTTe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5CTTe.png" alt="enter image description here"></a></p>
  
  <p>Im struggling to differentiate between any of the Google Pixel Phones. </p>
  
  <pre><code>@media only screen and (min-width: 411px) and (max-width: 731px) {
      .myDiv{ background-color: blue; }
  }
  </code></pre>
  
  <p>this triggers on all Pixels - both in emulators and physical devices</p>
  
  <pre><code>@media only screen and (min-width: 411px) and (-webkit-device-pixel-ratio: 3) {
      .myDiv{ background-color: blue; }
  }
  </code></pre>
  
  <p>this does not trigger at all with any pixel phone - dosnt matter if 3 or 4 pixel ratio</p>
  
  <pre><code>@media screen and (device-width: 411px) and (device-height: 731px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2.6){
     .myDiv{ background-color: blue;
  }
  </code></pre>
  
  <p>this also does not trigger on any pixel phone</p>
  
  <p>im struggling to find even ONE media query that works for isolating the Google Pixel 2 XL - nothing seems to have been posted - but the phone has been out for a while?</p>
  
  <p>Has anyone had any luck with this?</p>