Immagini sfocate in iphone 4 mobile safari

Question

Sto creando un'app Web mobile e sto avendo qualche problema con le mie immagini. Sono fantastici sul mio desktop ma tutti sfocati nell'iPhone. Immagino che sia la causa del display retina e che il safari mobile debba raddoppiare la dimensione dei siti web.

C'è una soluzione alternativa per far apparire le immagini nitide su iPhone 4?

Answer 1

Ho trovato la risposta. Ho trovato questo articolo: http://seesparkbox.com/foundry/targeting_iphone_4s_retina_display_with_media_queries che sostiene utilizzando media query in questo modo:

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    #map-page .ui-icon { 
     background-image: url("/images/retina/4_ikon_hitta.png"); 
    } 
} 

Questo funziona per ora, ma non ho una soluzione ottimale. Nei commenti di un altro articolo là dove si parla di non usare affatto i pixel come misura, il che ha perfettamente senso. L'iPhone4 è solo il primo di molti dispositivi ad alta risoluzione a venire. Quindi un pixel sarà ancora più grande in futuro.

Mobile Safari da allora supporta iOS 2.1 per SVG, quindi a seconda di quali dispositivi è necessario supportare SVG (forse con qualche riserva) è qualcosa da considerare.

Per il mio (e anche il vostro!) Prossimo progetto sto scavando in ems, points,% e SVG.