競合するメディアクエリiPhone X

Question

次のメディアクエリがあります。最初のものは、特定の幅以下の特定の画面用です。 2つ目はiPhone X用です。iPhone Xの場合のみ、最初のメディアクエリを上書きすることは可能ですか？以下は、私が何を探していることは-webkit-min-device-pixel-ratioであると考えてい

@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-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プラス/
• MacBookのRetinaディスプレイとのPro/を、結果を結果
• Lenovo Thinkpad（すなわち）/結果
のRetinaとMacBook Proの経由BrowserStack上
• エミュレートiPhone 6プラス/ は3レノボのThinkPadを経由してBrowserStack上
• エミュレートiPhone 6プラス/すべてのこれらのケースでは

を結果結果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>