conflicting media queries iPhone X

Question

I have the following media queries. The first one is for certain screens below a certain width. The second is specifically for the iPhone X. Is it possible to override the first media query when it is an iPhone X only? The following does not seem to work

@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; }
}

How are you testing? Actual device or emulator? – Robert Wade Nov 05 '17 at 13:29 — Robert Wade, Nov 05 '17 at 13:29
Hi Robert, on the emulator. – user1038814 Nov 05 '17 at 13:34 — user1038814, Nov 05 '17 at 13:34
try using: -webkit-min-device-pixel-ratio (notice *-min*). – Robert Wade Nov 05 '17 at 14:16 — Robert Wade, Nov 05 '17 at 14:16

score 0 · Answer 1 · answered Nov 05 '17 at 14:42

I believe what you're looking for is -webkit-min-device-pixel-ratio.

The -webkit-device-pixel-ratio feature is specified as a value. It is a range feature, meaning that you can also use the prefixed -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio variants to query minimum and maximum values, respectively. (source)

As a test of this I set up the following fiddle, which will output -webkit-min-device-pixel-ratio (with credit to this). Also stack snippet below.

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

I tested this on several devices with the following results:

Actual iPhone 7 Plus / Result 3
Macbook Pro with Retina Display / Result 3
Lenovo Thinkpad (ie) / Result 0
Emulated iPhone 6 Plus on BrowserStack via Macbook Pro with Retina / Result 3
Emulated iPhone 6 Plus on BrowserStack via Lenovo Thinkpad / Result 3

In all these cases the Browserstack emulators returned the proper results (which honestly suprised me).

I also re-ran all the tests but removed -min from the query in the javascript, and every single test case returned 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>

conflicting media queries iPhone X

1 Answers1