Вы можете использовать медиазапросы CSS3 для определения соотношения пикселей устройства iPhone 4 (сколько пикселей CSS равно физическому пикселю дисплея).Затем вы можете использовать CSS для загрузки изображений с более высоким разрешением вместо обычных.
В теге <head> на своей веб-странице добавьте это для ссылки на внешнюю таблицу стилей, которая будет загружена только для iPhone 4.users:
<link rel="stylesheet" type="text/css" href="high_res.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
Атрибут media указывает, что эту таблицу стилей следует использовать только для устройств с минимальным соотношением пикселей на устройстве, равным 2 (т. е. iPhone 4).Затем вы можете добавить правила CSS в файл high_res.css, чтобы заменить изображения с низким разрешением версиями с высоким разрешением:
#highres-if-possible {
background-image: url(high_res_pic.png);
}
Обратите внимание, что вам придется указать изображение в HTML с помощью CSS background-imageсвойство вместо атрибута src.
Пример: для изображения 60x50 замените:
<img id="highres-if-possible" src="low_res_pic.png">
на
<img id="highres-if-possible" style="width: 60px; height: 50px; background-image: url(low_res_pic.png);">
Нет гарантии, что указание таких изображений будет работать во всех браузерах (Internet Explorer), но он должен нормально работать в совместимых со стандартами браузерах (и на iPhone).
Для получения дополнительной информации о медиазапросах CSS3 и их использовании для обнаружения iPhone 4 см .: http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html
ОБНОВЛЕНИЕ : я встречал этот пост и этот пост , который мог бы иметь лучший способ справиться со спецификациейизображения с использованием CSS (используя <img style="background-image:url(<a href="http://.." rel="nofollow noreferrer">http://..</a>.)"> вместо <img src="http://...">), чем у меня выше.