3

我正在编写一个科尔多瓦应用程序，需要隔离这些谷歌手机以调整样式

鉴于这种：

在此处输入图像描述

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

@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 的媒体查询——似乎没有发布任何内容——但手机已经有一段时间了？

有没有人有这方面的运气？

4

2 回答 2

6

您可以使用 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);
}

谷歌 Pixel 2 XL 输出：

宽度：412 像素

高度：823 像素

像素纵横比：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) {

}
于 2018-11-12T19:52:44.367 回答
-4

在 Google Pixel XL 上试试这个：

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

}'

于 2018-08-22T16:41:31.067 回答