Używam tego JavaScript hack, aby załadować skalowane obrazy, gdy działa na urządzeniu siatkówki. Zmieni atrybut src i width na wszystkich obrazach, aby użyć odpowiedniego skalowanego obrazu. Zauważ, że testowałem to tylko z lokalnymi obrazami.

Ustawienie display: none, a następnie zresetowanie go na szwach ładowania obrazu, aby naprawić niektóre migotanie. Zauważ również, że ten kod prawdopodobnie nie jest kompatybilny z innymi przeglądarkami niż 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];
  }
});

Porada polega na dodaniu tego do pliku o nazwie np. scaledimages.js, a następnie użycie

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

Upewnij się, że plik js jest wymieniony w "Copy Bundle Resources", a nie w " Compiled Sources "w Twoich celach"Build faz". Domyślne szwy Xcode wykrywają pliki Javascript jako coś, co lubi kompilować. Należy również pamiętać, że obecny skrypt może zepsuć rzeczy, Jeśli devicePixelRatio stanie się 3 lub większa w przyszłości, środkiem ostrożności może być zmiana (scale == undefined || scale == 1) na scale != 2 tylko załadować @2x na teraz.

Update: istnieje również jQuery-Retina-Display-Plugin, który robi coś podobnego, ale wymaga ustawienia atrybutu width i seams, aby również użyć żądania HEAD, aby sprawdzić, czy obraz istnieje, Nie wiem, jak to będzie działać dla plików lokalnych.

Przypuszczałem, że można to również osiągnąć za pomocą magii CSS lub Javascript, aby wyświetlić tylko odpowiedni obraz. Główną ideą jest wstawienie dwóch obrazów, normalnej i wysokiej rozdzielczości, a następnie ustawienie atrybutu CSS display na none , aby zdjęcia miały maskować:

Plik 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" />

Plik CSS: domyślnie.css

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

Plik CSS: highresolution.css

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

I ' ve test it a trochę i zadziałało dobrze. Potrzebuję więcej badań. Znalazłem rozwiązanie tutaj: http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport

Aktualizacja 2012-06-24

Oto inne rozwiązanie bez potrzeby wysokiej rozdzielczości.plik css .
Dodaj następujący kod w domyślnie.css .

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

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

   ...

Just always do:

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

Dla obrazów tła odwołujących się do CSS, użyj -webkit-background-size do połowy ich rozmiaru.

Wada: urządzenia nie-retina będą pobierać obrazy oversized.

Najlepszym rozwiązaniem jest użycie obrazów o wysokiej rozdzielczości zarówno dla przeglądów internetowych opartych na siatkówce, jak i innych. Następnie Ustaw Rozmiar obrazu (w punktach) za pomocą atrybutu szerokość i wysokość.

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

Jeśli chodzi o wykrywanie, możesz użyć tej próbki kodu . Właśnie go zaktualizowałem, aby wykryć iPhone ' a 4.