Question

我有以下媒体查询。第一个是针对特定宽度以下的某些屏幕。第二个是专门为iPhone X设计的。当它只是iPhone X时，是否可以覆盖第一个媒体查询？以下似乎不起作用

@media (max-width: 449px) {
    h1.question { padding: 20px 0px; }
}

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
        h1.question { padding-top: 50px !important; }
}

Answer 1

我相信您正在寻找的是trainer = train(y~., data=traindf, method="svmLinear") predicted = predict(trainer, testdf)。

-webkit-device-pixel-ratio功能被指定为值。这是一个范围功能，这意味着您还可以使用前缀-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio变体分别查询最小值和最大值。（ source）

作为对此的测试，我设置了以下小提琴，输出-webkit-min-device-pixel-ratio（with credit to this）。还在下面堆叠片段。

https://jsfiddle.net/3w5rq8pj/10/

我在多台设备上对此进行了测试，结果如下：

实际iPhone 7 Plus /结果 3
带Retina显示的Macbook Pro /结果 3
联想Thinkpad（即）/结果 0
通过带有Retina /结果的Macbook Pro在BrowserStack上模拟iPhone 6 Plus 3
通过联想Thinkpad /结果 3

在所有这些情况下，Browserstack模拟器返回了正确的结果（这让我很吃惊）。

我还重新运行了所有测试但是从javascript中的查询中删除了-min，并且每个测试用例都返回0。

＆＃13;

-webkit-min-device-pixel-ratio

＆＃13;

function guess() {
  var ls, l=0, h=8192, c=parseInt((l+h)/2), i=20;
while (i > 0 && (c - l >1) && (h - c>1)) {
  i--; // Shouldn't take more than 13 guesses, but in case of bugs!
  if (window.matchMedia('(-webkit-min-device-pixel-ratio: ' + c + ')').matches) {
    l=c; ls=0;
  } else {
    h=c; ls=1;
  }
  c = parseInt((h+l)/2);
}
c -= ls;
document.getElementById("result").innerHTML = "min pixel ratio: " + c;
}

guess();

＆＃13;

冲突的媒体查询iPhone X

1 个答案: