Why doesn't this media query hit retina?

Question

I'm struggling with a media query trying to target retina screens. I got this media query;

@media(-webkit-min-device-pixel-ration:2)and (min-resolution:192dpi) {}

In Chrome Canary Devtools it does get the style but testing it on a actually retina display (iphone 5s in this case) does not.

I also use this viewport so it scales everything, I tried to remove it but it didn't do any difference in my issue above.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5 maximum-scale=0.5, user-scalable=no target-densitydpi=device-dpi">

Any ideas on why I have this issue?

Answer 1

Try this media query, it works

@media  
only screen and (-webkit-min-device-pixel-ratio: 2),  
only screen and ( min--moz-device-pixel-ratio: 2),  
only screen and ( -o-min-device-pixel-ratio: 2/1),  
only screen and ( min-device-pixel-ratio: 2),  
only screen and ( min-resolution: 192dpi),  
only screen and ( min-resolution: 2dppx){
   //your css goes here..
}  

Also change the viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">