Come utilizzare correttamente -webkit-device-pixel-ratio su iOS e Android?

Question

-webkit-device-pixel-ratio la query è supportata sia da iOS che da Android ma poiché iOS non supporta target-densitydpi=device-dpi porta a risultati diversi. Per esempio:

@media screen and (-webkit-device-pixel-ratio: 2) { 
    body { font-size: 2em; } 
} 

farà carattere guardare bene su Galaxy Nexus, ma su iPhone 4 sarà troppo grande.

C'è un modo per emulare target-densitydpi=device-dpi su iOS senza JavaScript o per disabilitare -webkit-device-pixel-ratio su iOS e lasciare i suoi utenti con immagini sfocate come fallback?

Answer 1

@media (-webkit-min-device-pixel-ratio: 2), /* Retina on Webkit */ 
     (min-resolution: 192dpi)    /* Everyone else */ { 
... 
} 

da questo grande articolo che ho letto oggi per inciso: http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/