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

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

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

8
iphone-4 mobile-safari retina-display web-applications

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-устройств. Таким образом, пиксель будет четным больше размеров в будущем.

У Mobile Safari есть поддержка ios 2.1 для SVG, поэтому в зависимости от того, какие устройства вы должны поддерживать SVG (возможно, с некоторым запасным вариантом), это что-то сильно рассмотреть.

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

3