Media Query将Google Pixel 1/2与Google Pixel XL与Google Pixel 2 XL区分开来

时间:2018-03-02 23:23:34

标签: android media-queries google-pixel

我正在编写一个cordova应用程序,需要隔离这些谷歌手机以调整样式

鉴于此:

enter image description here

我正在努力区分任何Google Pixel Phones。

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

这会触发所有像素 - 包括模拟器和物理设备

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

这根本不会触发任何像素手机 - 如果3或4像素比率,则剂量很重要

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

这也不会在任何像素手机上触发

我很难找到一个适用于隔离Google Pixel 2 XL的媒体查询 - 似乎没有发布任何内容 - 但手机已经停用了一段时间?

有没有人对此有任何好运?

2 个答案:

答案 0 :(得分:1)

您可以使用Javascript获取设备的宽度,高度和pixel aspect ratio

输出设备信息功能

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像素

高度:823px

像素长宽比:3.5

针对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) {

}

答案 1 :(得分:-2)

尝试使用Google Pixel XL

/ * Google Pixel XL * /  '@media屏幕和(设备宽度:411像素)和(设备高度:823像素){

}'