iPhone 5 and 5S Media Query cascading to Samsung Galaxy S4

Question

I have the following media query for iPhone 5 and 5S:

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)

A style in this media query is "cascading" or "leaking" on a Samsung Galaxy S4.

I am not using an actual Samsung Galaxy S4 for testing, instead, I am using Chrome F12 tools Device Mode . Device Mode "spoofs" the user agent string and view port for testing different devices.

So perhaps Chrome F12 tools Device Mode has not properly "spoofed" the user agent string and view port so that I can truly test my media queries.

I would think that the -webkit-min-device-pixel-ratio: 2 "condition" of my iPhone 5 & 5S media query would eliminate the chance that the iPhone 5 and 5s media query CSS would "leak" to a Samsung Galaxy S4, native or spoofed user agent screen and view port.

Answer 1

The Galaxy S III has a 2.0 device pixel ratio and the 4 has 3.0 min device pixel ratio so the CSS is correct in its rendering.

SEE Device Pixel Ratio Reference