Perché questa query multimediale ha colpito Retina?

Question

Sto lottando con una query multimediale che cerca di indirizzare le schermate della retina. Ho ricevuto questa query multimediale;

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

.

In Chrome Canary Devtools Guadagna lo stile ma testerlo su un display in realtà retina (iPhone 5s in questo caso) no.

Io uso anche questa vista in modo da scalare tutto, ho provato a rimuoverlo ma non ha fatto alcuna differenza nel mio problema sopra.

<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">

.

Qualche idea sul perché ho questo problema?

Answer 1

Prova questa query del supporto, funziona

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

.

Cambia anche la vista

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

.