Ho una visualizzazione Web che mostra un'immagine, come mostrato nel codice qui sotto. Il bundle ha anche un [email protected] con dimensioni di 128x128 per l'utilizzo su iPhone4. [email protected] non viene mai visualizzato. C'è un modo per visualizzare o a seconda che si tratti di un iPhone o di un iPhone4?Immagini ad alta risoluzione in un'interfaccia utente
<img src="DGT64.png" width="64" height="64" align="left" style="padding:2px;"/>
Non credo che il trucco @2x lavora con contenuti web. Sembra davvero utile, però, vorrei presentare un bug con Apple per richiederlo.
Se si sta generando il codice HTML sopra riportato dalla propria app, penso che il modo migliore per ora sarà quello di rilevare se si sta eseguendo su un dispositivo di visualizzazione Retina e quindi regolando manualmente il nome dell'immagine.
È possibile rilevare il display Retina facendo qualcosa di simile:
if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
if ([[UIScreen mainScreen] scale] == 2) {
// Use high resolution images
}
}
(preso quel codice da una risposta che ho trovato qui a SO)
Attualmente il modo migliore per farlo è facendo riferimento le tue immagini nel tuo file CSS usando la proprietà background-image. Quindi, puoi utilizzare un file CSS speciale che viene caricato solo da dispositivi con schermi ad alta risoluzione per sovrascrivere queste proprietà.
Vedere this blog post per ulteriori informazioni.
Il modo per farlo è con sfondi CSS. Basta incorporare tutte le tue cose 2x in una sottosezione in CSS. La chiave è anche quella di impostare -webkit-background-size. Ecco un esempio della porzione di css (sia retina che non) per un div con l'id Ampersand che funge da immagine.
div#Ampersand {
background: url('AmpersandBurned.png');
width:43px;
height:97px;
float:left;
-webkit-background-size: 43px 97px;
}
@media screen and (-webkit-device-pixel-ratio: 2) {
div#Ampersand {
background: url('[email protected]');
width:43px;
height:97px;
float:left;
}
}
Mi hai salvato amico! Non ero in grado di trovare la soluzione reale per mostrare le immagini Retina in CSS – Volatil3
Grazie. Non sto generando il codice HTML dall'app, ma probabilmente posso avere 2 file pathForResource diversi e in base al test precedente utilizzare quello appropriato. Lo proverò. –
Improbabile che si verifichi senza un tag META (non standard) o simile - non è una buona idea raddoppiare il numero di richieste che si stanno colpendo su un server solo per ottenere immagini più carine, soprattutto dal momento che la maggior parte dei siti Web (ad esempio Desktop siti) renderà comunque in scala 1/2 o 1/3. –
Non ancora fatto, ma questo è l'approccio che sto prendendo. Potrei non aver capito cosa si intende per "se stai generando il ... HTML dalla tua app" e quindi ho potuto ingannare tc. L'HTML risiede nel mio pacchetto. È sistemato; utilizzato per l'applicazione per visualizzare il testo formattato in una UIWebview. Nessun server coinvolto. Non sto generando l'HTML al volo, quindi non posso sostituire un nome e dimensioni di immagine diversi, ma è abbastanza facile avere un secondo file HTML con riferimenti e dimensioni di immagine ad alta risoluzione per l'iPhone4 e utilizzare il codice suggerito sopra per decidere quale pathForResource utilizzare. –