3

Im writing a cordova app and need to isolate these google phones to adjust styling

given this:

enter image description here

Im struggling to differentiate between any of the Google Pixel Phones. 

@media only screen and (min-width: 411px) and (max-width: 731px) {
    .myDiv{ background-color: blue; }
}

this triggers on all Pixels - both in emulators and physical devices

@media only screen and (min-width: 411px) and (-webkit-device-pixel-ratio: 3) {
    .myDiv{ background-color: blue; }
}

this does not trigger at all with any pixel phone - dosnt matter if 3 or 4 pixel ratio

@media screen and (device-width: 411px) and (device-height: 731px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2.6){
   .myDiv{ background-color: blue;
}

this also does not trigger on any pixel phone

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?

Has anyone had any luck with this?

Dan
  • 3,755
  • 4
  • 27
  • 38
  • Did you have any luck on this? I have the same problem – alex May 03 '18 at 16:52
  • i have not unfortunatley :( - seems like SO questions get buried REAL quick nowadays - wonder if something changed. – Dan May 03 '18 at 18:31
  • what i ended up doing is calculating device height with JS and attaching variables to css classes to push and pull div elements based on height.... not pretty but works – Dan May 03 '18 at 18:31

2 Answers2

6

You can get a devices width, height, and pixel aspect ratio using Javascript.

Output Device Information Function

function OutputDeviceInformation() {
  let deviceWidth = window.screen.width;
  let deviceHeight = window.screen.height;
  let devicePixelAspectRation = window.devicePixelRatio;

  console.log('Width: ' + deviceWidth);
  console.log('Height: ' + deviceHeight);
  console.log('Pixel Aspect Ratio: ' + devicePixelAspectRatio);
}

Google Pixel 2 XL Output:

Width: 412px

Height: 823px

Pixel Aspect Ratio: 3.5

Media Query to target Google Pixel 2 XL

/* Portrait */
@media screen 
  and (device-width: 412px) 
  and (device-height: 823px) 
  and (-webkit-device-pixel-ratio: 3.5) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 412px) 
  and (device-height: 823px) 
  and (-webkit-device-pixel-ratio: 3.5) 
  and (orientation: landscape) {

}

/* Target Portrait and Landscape */
@media screen 
  and (device-width: 412px) 
  and (device-height: 823px) 
  and (-webkit-device-pixel-ratio: 3.5) 
  and (orientation: landscape) {

}
L1ghtk3ira
  • 3,021
  • 6
  • 31
  • 70
-4

Try this for Google Pixel XL :

/*Google Pixel XL */ '@media screen and (device-width: 411px) and (device-height: 823px){

}'

Prerna
  • 1