Изображения размыты в iphone 4 mobile safari

Question

Я делаю мобильное веб-приложение, и у меня проблемы с моими изображениями. Они отлично смотрятся на моем рабочем столе, но все размыты в iPhone. Я предполагаю, что это причина «отображения сетчатки», и что мобильному сафари нужно удвоить размер веб-сайтов.

Есть ли обходной путь для получения четких изображений на iPhone 4?

Answer 1

Я нашел ответ. Я нашел эту статью: http://seesparkbox.com/foundry/targeting_iphone_4s_retina_display_with_media_queries которая выступает с использованием медиа запросов, как это:

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

Это работает сейчас, но я не является оптимальным решением. В комментариях к другой статье там, где говорится о том, чтобы не использовать пиксели как измерение вообще, что имело смысл. IPhone4 - это всего лишь первое из множества устройств с высоким разрешением dpi. Таким образом, пиксель будет еще больше размеров в будущем.

Мобильный Safari с тех пор поддерживает iOS 2.1 SVG, поэтому в зависимости от того, какие устройства вы должны поддерживать SVG (возможно, с некоторыми резервными моментами), нужно серьезно подумать.

Для моего (и вашего тоже!) Следующего проекта я копаю ems, points,% и SVG.