UIWebView et iPhone 4 écran Retina

Question

J'ai un UIWebView qui affiche un texte local et des images. Soit je l'ai fait une erreur quelque part de, ou la UIWebView ne gère pas automatiquement le suffixe @2x pour des images haute résolution.

Alors, ma question est a quelqu'un d'autre images @2x chargé avec succès dans un UIWebView par les moyens normaux, ou dois-je besoin de faire quelque chose de spécial? Puis-je détecter une certaine façon si mon utilisateur dispose d'un écran Retina?

Answer 1

Selon votre demande ...

Test de fonctionnalité. Si vous voulez savoir si vous avez besoin d'afficher une image de la rétine ou une image régulière, puis de tester si votre appareil dispose d'un écran Retina, pas que ce soit d'un modèle particulier (futur preuve de votre application comme vous le pouvez, signifie que vous devez changer moins de choses quand un nouveau modèle sort). Pour ce faire, vous pouvez utiliser le code exemple suivant:

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

Ce code est sûr, au moment où j'écrit cela, sur tous les modèles et toutes les versions de firmware. Il sera en sécurité sur les versions futures et jusqu'à ce qu'Apple désapprouve la méthode scale, qui ne peut jamais se produire.

En savoir plus sur votre question, je ne sais pas comment faire cela dans une WebView sans avoir les endroits à une image de la rétine et une image non-rétine au préalable. Une fois que j'ai cette information, je (dans le passé) utilisé pour remplacer un texte sentinelle connu que la page web me devrait remplacer, comme je mettrais quelque chose dans le code HTML qui avait dire: {{{image_location}}} où je pourrais télécharger le code HTML données, l'obtenir en format de chaîne, puis faites un remplacement sur cette chaîne remplacer ce texte, avec l'URL du @ 2x image si nous sommes sur un écran de la rétine, avec le facteur d'échelle approprié, ou l'image de taille normale sinon ( en utilisant le code ci-dessus).

Espérons que cela aide si personne ne se présente avec une meilleure solution.

Answer 2

J'utilise ce hack Javascript pour charger des images mises à l'échelle lors de l'exécution sur un périphérique de la rétine. Il va changer l'attribut src et width sur toutes les images à utiliser l'image redimensionnée correspondante. Notez que je n'ai testé avec des images locales.

Réglage display: none puis remettez-le sur les coutures de charge d'image pour fixer un certain scintillement. Notez également que ce code est probablement pas compatible avec d'autres navigateurs que 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];
  }
});

Conseils est d'ajouter à un fichier appelé par exemple scaledimages.js puis utilisez

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

Assurez-vous que le js fichier est listé dans « Copier des ressources Bundle » et non dans « Sources » Compilé dans vos cibles « phases de mise sur pied ». coutures par défaut Xcode détecter les fichiers Javascript comme quelque chose qu'il aime à compiler. Notez également que le script actuel pourrait casser des choses si devicePixelRatio arriver à être 3 ou plus à l'avenir, par précaution pourrait être de changer le (scale == undefined || scale == 1) à scale != 2 que @2x de charge pour l'instant.

Mise à jour: Il y a aussi un jQuery-affichage Retina -plugin qui fait quelque chose de similaire, mais vous oblige à définir l'attribut width et coutures d'utiliser également une demande de HEAD pour voir si le exist d'image, pas sûr comment cela fonctionnera pour les fichiers locaux.

Answer 3

Je supposa cela peut aussi être obtenue en utilisant un peu de CSS ou Javascript magique pour afficher uniquement l'image appropriée. L'idée principale est d'insérer les deux images, la résolution normale et élevée, puis pour définir l'attribut CSS affichage pas pour les images à masque:

fichier 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="image@2x.png" width="..."   height="..."    class="highRes" />

fichier CSS: default.css

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

fichier CSS: highresolution.css

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

J'ai le tester un peu et cela a bien fonctionné. Vous avez besoin d'autres tests maintenant. Je l'ai trouvé ici la solution: http://www.mobilexweb.com / blog / iphone4-iOS4-détection-safari- fenêtre

Mise à jour 2012-06-24

Voici une autre solution sans avoir besoin de highresolution.css de fichier .
Ajoutez le code suivant dans default.css .

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

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

   ...

Answer 4

Il suffit de toujours faire:

<img src="image@2x.png" width={half-width} />

pour les images de fond référencé CSS, l'utilisation -webkit-taille de fond à demi-taille eux.

Inconvénient:. Les appareils non rétine téléchargeront images surdimensionnées

Answer 5

La meilleure solution est d'utiliser les images haute résolution pour les deux rétine et non rétine à base WebViews. Ensuite, régler la taille de l'image (points) en utilisant l'attribut de largeur et de hauteur.

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

Answer 6

En ce qui concerne la détection, vous pouvez utiliser cet exemple de code . Je l'ai juste mis à jour pour détecter également l'iPhone 4.