Pourquoi cette requête médiatique ne frappe-t-elle pas la rétine?

Question

Je me débats avec une requête médiatique en essayant de cibler des écrans de rétine. J'ai eu cette requête médiatique;

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

dans chrome canary devtools, il obtient le style mais le teste sur un affichage réellement de rétine (iPhone 5S dans ce cas) ne le fait pas.

J'utilise aussi cette fenêtre de vue afin qu'il échoue tout, j'ai essayé de le supprimer, mais cela n'a pas fait de différence dans mon problème ci-dessus.

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

Des idées sur la raison pour laquelle j'ai ce problème?

Answer 1

Essayez cette requête médiatique, elle fonctionne

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

modifie également la fenêtre

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