Imágenes borrosas en el safari móvil iphone 4

Question

Estoy haciendo una aplicación web móvil y estoy teniendo algunos problemas con mis imágenes. Se ven muy bien en mi escritorio, pero todos borrosos en el iPhone. Supongo que es la causa de la visualización de la retina y que el safari móvil necesita duplicar el tamaño de los sitios web.

¿Existe alguna solución para que las imágenes aparezcan nítidas en el iPhone 4?

Answer 1

He encontrado la respuesta. He encontrado este artículo: http://seesparkbox.com/foundry/targeting_iphone_4s_retina_display_with_media_queries que aboga por el uso de preguntas de los medios de esta manera:

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

Esto funciona por ahora, pero no i una solución óptima. En los comentarios de otro artículo, se habló de no usar píxeles como medida, lo que tenía mucho sentido. El iPhone4 es solo el primero de muchos dispositivos de alta resolución por venir. Entonces, un píxel tendrá incluso más tamaños en el futuro.

Mobile Safari tiene soporte desde ios 2.1 para SVG, por lo que dependiendo de qué dispositivos tenga que admitir SVG (quizás con algún retraso) es algo que debe tenerse muy en cuenta.

Para mi (y el tuyo también) próximo proyecto estoy cavando en ems, puntos,% y SVG.