Ответ 1

В соответствии с вашим запросом...

Тест на функциональность. Если вы хотите узнать, нужно ли отображать изображение сетчатки или обычное изображение, тогда проверьте, имеет ли ваше устройство сетчатый дисплей, а не то, что он имеет определенную модель (в будущем, насколько это возможно, для вашего приложения, означает, что вам нужно изменить меньше материала, когда появляется новая модель). Для этого вы можете использовать следующий пример кода:

if([[UIScreen mainScreen] respondsToSelector:@selector(scale)] &&
   [[UIScreen mainScreen] scale] == 2.0)
{
    /* We have a retina display. */
}
else
{
    /* We do not. */
}

Этот код является безопасным с момента, когда я писал это, на всех моделях и на всех версиях прошивки. Это будет безопасно и в будущих версиях, пока Apple не обесценит метод scale, который никогда не может произойти.

Подробнее о вашем вопросе, я не знаю, как это сделать в веб-браузере, не имея места для изображения сетчатки и изображения без сетчатки заранее. Как только у меня есть эта информация, я (в прошлом) использовал ее, чтобы заменить какой-то известный дозорный текст, который ожидала меня на веб-странице, так как я бы поместил что-то в HTML, который сказал: {{{image_location}}}, где я мог бы скачать данные HTML, введите его в строковый формат, затем замените на этой строке, заменяющей этот текст, URL-адресом изображения @2x, если мы находимся на экране сетчатки, с соответствующим коэффициентом масштабирования или изображением нормального размера, если не (используя приведенный выше код).

Надеюсь, это поможет, если никто не найдет лучшего решения.

Ответ 2

Я использую этот Javascript hack для загрузки масштабированных изображений при работе на сетчатом устройстве. Он изменит атрибут src и width на всех изображениях, чтобы использовать соответствующее масштабированное изображение. Обратите внимание, что я тестировал это только с локальными изображениями.

Установите display: none, а затем reset на швы загрузки изображений, чтобы исправить некоторые мерцания. Также обратите внимание, что этот код, вероятно, не совместим с другими браузерами, чем с WebKit.

document.addEventListener("DOMContentLoaded", function() {
  var scale = window.devicePixelRatio;
  // might want this to be scale != 2
  if (scale == undefined || scale == 1) {
    return;
  }

  var re = /^(.*)(\..*)$/;
  var images = document.getElementsByTagName("img");
  for (var i =  0; i < images.length; i++) {
    var img = images[i];
    var groups = re.exec(img.src);
    if (groups == null) {
      continue;
    }

    img.style.setProperty("display", "none");
    img.addEventListener("load", function(event) {
      event.target.width /= scale;
      event.target.style.setProperty("display", "");
    });
    img.src = groups[1] + "@" + scale + "x" + groups[2];
  }
});

Подсказки - это добавить это в файл, называемый, например. scaledimages.js, а затем используйте

<script type="text/javascript" src="scaledimages.js"></script>

Убедитесь, что js файл указан в "Copy Bundle Resources", а не в "Скомпилированных источниках" в ваших целях "Фазы сборки". Шрифты по умолчанию Xcode обнаруживают файлы Javascript как что-то, что ему нравится компилировать. Также обратите внимание, что текущий script может сломать вещи, если devicePixelRatio окажется в будущем более 3 или более, может потребоваться изменить (scale == undefined || scale == 1) на scale != 2 только нагрузку @2x.

Обновление: Существует также jQuery-Retina-Display-Plugin, который делает что-то подобное, но требует установки width, а также использовать запрос HEAD, чтобы увидеть, существует ли изображение, не знаете, как это будет работать для локальных файлов.

Ответ 3

Я предположил, что это также может быть достигнуто с помощью некоторых CSS или Javascript-магии, чтобы отобразить только подходящую картинку. Основная идея состоит в том, чтобы вставить два изображения, нормальное и высокое разрешение, а затем установить для атрибута атрибута CSS значение none для маскировки изображений:

HTML файл

<link href="default.css" rel="stylesheet" media="screen" type="text/css" />
<link href="highresolution.css" media="screen and (-webkit-min-device-pixel-ratio:2)" type="text/css" rel="stylesheet" />

...

<img src="image.png"    width="..."   height="..."    class="normalRes" />    
<img src="[email protected]" width="..."   height="..."    class="highRes" />

Файл CSS: default.css

.normalRes { display:block } /* or anything else */
.highRes   { display:none  }

Файл CSS: highresolution.css

.normalRes { display:none  }
.highRes   { display:block }  /* or anything else */

Я тестировал это немного, и он работал хорошо. Теперь нужно больше тестов. Я нашел решение здесь: http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport

ОБНОВЛЕНИЕ 2012-06-24

Вот еще одно решение, не требующее файла highresolution.css.
Добавьте следующий код в default.css.

@media all and (-webkit-min-device-pixel-ratio: 2) {

   .normalRes { display:none  }
   .highRes   { display:block }

   ...

Ответ 4

Просто всегда делайте:

<img src="[email protected]" width={half-width} />

для фоновых изображений с привязкой к CSS, используйте -webkit-background-size, чтобы уменьшить их размер.

Недостаток: устройства без сетчатки будут загружать негабаритные изображения.

Ответ 5

Лучшим решением является использование изображений с высоким разрешением для WebViews с сетчаткой и сетчаткой. Затем задайте размер изображения (в точках), используя атрибут width и height.

<img src="hi-res-icon.png" width="10px" height="10px" />

Ответ 6

Что касается обнаружения, вы можете использовать этот пример кода. Ive просто обновил его, чтобы также обнаружить iPhone 4.