html - 冲突的媒体查询 iPhone X

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

我相信您正在寻找的是 -webkit-min-device-pixel-ratio。

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

作为对此的测试，我设置了以下 fiddle ，它将输出 -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
• 通过 Lenovo Thinkpad 在 BrowserStack 上模拟 iPhone 6 Plus/结果 3

在所有这些情况下，Browserstack 模拟器都返回了正确的结果(老实说，这让我感到惊讶)。

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

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();

<div id="result"></div>