媒体查询可区分Google Pixel 1/2 vs Google Pixel XL vs Google Pixel 2 XL

问题描述

我正在编写Cordova应用，需要隔离这些Google手机以调整样式

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

鉴于此:

我正在努力区分任何一款Google Pixel手机.

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; }
}

这完全不会触发任何像素手机-像素比例为3或4无关紧要

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

我正努力寻找一个可以隔离Google Pixel 2 XL的媒体查询-似乎什么都没发布-但是手机已经出了一阵子了?

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?

有人有运气吗?

推荐答案

您可以获取设备的宽度，高度和像素长宽比.

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

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输出:

宽度:412像素

Google Pixel 2 XL Output:

Width: 412px

高度:823px

像素长宽比:3.5

/* 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) {

}

这篇关于媒体查询可区分Google Pixel 1/2 vs Google Pixel XL vs Google Pixel 2 XL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！