Display retina UIWebView e iPhone 4

Question

Ho un UIWebView che visualizza testo e immagini locali. O ho fatto un errore da qualche parte, oppure lo UIWebView non gestisce automaticamente il suffisso @2x per immagini ad alta risoluzione.

Quindi, la mia domanda è qualcun altro ha caricato con successo le immagini @2x in un UIWebView attraverso i normali mezzi, o devo fare qualcosa di speciale? Posso in qualche modo rilevare se il mio utente ha un display retina?

Answer 1

secondo la vostra richiesta ...

test per la funzionalità. Se vuoi sapere se hai bisogno di visualizzare un'immagine retina o un'immagine normale, prova se il tuo dispositivo ha un display retina, non che è di un modello particolare (prova a posteriori la tua applicazione come meglio puoi, significa che devi cambiare meno cose quando esce un nuovo modello). Per fare questo, è possibile utilizzare il seguente codice di esempio:

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

Questo codice è sicuro, in quanto parte del tempo ho scritto questo, su tutti i modelli e su tutte le versioni del firmware. Sarà sicuro anche nelle versioni future fino a quando Apple non ritirerà il metodo scale, che potrebbe non succedere mai.

Altro sulla tua domanda, non so come farlo in una visualizzazione Web senza avere prima le posizioni su un'immagine di retina e un'immagine senza retina. Una volta che ho queste informazioni, l'ho usata (in passato) per rimpiazzare alcuni testi sentinella conosciuti che la pagina web si aspettava che io sostituissi, in quanto metterei qualcosa nell'HTML che aveva detto: {{{image_location}}} dove potevo scaricare l'HTML dati, prendi il formato stringa, quindi sostituisci quella stringa sostituendo quel testo, con l'URL dell'immagine @ 2x se siamo su un display retina, con il fattore di scala appropriato, o l'immagine di dimensioni normali se non (usando il codice sopra).

Spero che questo aiuti se nessuno arriva con una soluzione migliore.

Answer 2

Per quanto riguarda il rilevamento, è possibile utilizzare this code sample. Ho appena aggiornato per rilevare anche iPhone 4.

Answer 3

fare proprio sempre:

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

per CSS riferimento le immagini di sfondo, utilizzare -webkit-background-size a half-size di loro.

Svantaggio: i dispositivi senza retina scaricheranno immagini di grandi dimensioni.

Answer 4

Suppongo che ciò possa essere ottenuto utilizzando alcune funzioni CSS o Javascript per visualizzare solo l'immagine appropriata. L'idea principale è quella di inserire le due immagini, la risoluzione normale e alto e poi di impostare l'attributo CSS visualizzazione-nessuno per le immagini a mascherare:

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

file CSS: impostazione predefinita.css file di

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

CSS: highresolution.css

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

ho prova un po 'e ha funzionato bene. Hai bisogno di più test ora. ho trovato la soluzione qui: http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport

UPDATE 2012-06-24

Ecco un'altra soluzione senza bisogno di highresolution.css file.
Aggiungere il seguente codice nel default.css.

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

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

    ... 

Answer 5

La soluzione migliore è quella di utilizzare le immagini ad alta risoluzione per WebViews sia retina e non retina base. Quindi imposta la dimensione dell'immagine (in punti) usando l'attributo width e height.

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

Answer 6

Io uso questa Javascript hack per caricare le immagini in scala durante l'esecuzione su un dispositivo retina. Cambierà l'attributo src e width su tutte le immagini per utilizzare l'immagine in scala corrispondente. Si noti che l'ho provato solo con le immagini locali.

Impostazione display: none e quindi reimpostare su cuciture Carica immagine per correggere qualche sfarfallio. Si noti inoltre che questo codice probabilmente non è compatibile con altri browser oltre a 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]; 
    } 
}); 

Suggerimenti è quello di aggiungere questo ad un file chiamato per es. scaledimages.js e quindi utilizzare

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

Assicurarsi che il js-file è elencato in "Copia Bundle risorse" e non in "Fonti compilati" nei vostri obiettivi "Build fasi". Le giunzioni Xcode predefinite rilevano i file Javascript come qualcosa che gli piace compilare. Si noti inoltre che lo script corrente potrebbe rompere le cose se devicePixelRatio capita di essere 3 o più, in futuro, una precauzione potrebbe essere quella di cambiare l'unico (scale == undefined || scale == 1)-scale != 2 carico @2x per ora.

Aggiornamento: C'è anche una jQuery-Retina-Display-Plugin che fa qualcosa di simile, ma richiede di impostare l'attributo width e le cuciture di utilizzare anche una richiesta HEAD per vedere se l'immagine esiste, non so come che lavorerà per i file locali.