2010-09-14 4 views
12

Qualcuno sa come ottenere iOS per visualizzare l'immagine di avvio ad alta risoluzione quando si usa? Attualmente sono bloccato con un'immagine 460x380 che appare ovviamente orribile quando viene visualizzata sul display ad alta risoluzione di iPhone 4. Ho provato il trucco @ 2x ma non sembra funzionare.Immagine di avvio in webapp per il display Retina?

Eventuali idee o soluzioni alternative?

+0

Come viene visualizzata l'immagine di avvio? stai usando il file default.png? – Satyam

+0

Perché è 460x380? –

+0

Se si controlla la documentazione di Apple su http://bit.ly/95IHsf, si dice che l'immagine deve essere di 320 x 460 pixel e con orientamento verticale. Ho notato che ho risolto la risoluzione nella domanda, ma l'ho fatto con 320x460 e ho funzionato. La documentazione non dice nulla sulla retina display quindi non sono sicuro se è obsoleto, da qui la mia domanda. – Crispy

risposta

-3

Il trucco "@ 2x" funziona. Deve essere stato qualcosa di sbagliato nelle tue immagini.

Si desidera due file. Default.png e [email protected] Il primo dovrebbe essere 320x460. Il secondo dovrebbe essere 640x920. Prometto che funziona.

+0

No .. non funziona per qualche motivo. Ora ho Default.png e [email protected] e ho verificato le dimensioni di entrambi. Carica sempre Default.png. L'ho verificato dai log del mio server di sviluppo e non invia nemmeno una richiesta per la versione @ 2x. Qui mi sta sfuggendo qualcosa...* modifica * Stai parlando di avvio/splash image per webapp e non della tua immagine media tag img sulla pagina web, giusto? :) – Crispy

+2

Sto parlando della schermata iniziale di un'app NATIVE. E 'questo quello che stai chiedendo? Vedo che hai usato la parola "webapp" nel titolo della domanda, ma tutto il resto che hai scritto è stato come se stessi facendo un'app nativa ... La cosa @ 2x è per le app native. In Obj-C, creato con Xcode. –

+1

Ah, sto parlando di webapp che usi tramite Mobile Safari. Avevo l'impressione che in iOS4 Mobile Safari cercasse anche di controllare le immagini @ 2x. – Crispy

-1

Ho visto casi in cui XCode incasina in questa situazione. Oltre a ricontrollare la dimensione dell'immagine, (320x460) non fa male a:

  1. Assicurarsi che entrambe le immagini siano nel build. (A destra/Opzione fare clic sull'intestazione dei file e selezionare "appartenenza di destinazione" e quindi assicurarsi che la casella di controllo sia selezionata.)
  2. Eseguire una compilazione pulita.
  3. Elimina tutti i file di build nella directory di build. (Pulisci non li ottiene TUTTI)
  4. Elimina l'app dal telefono di destinazione/sim.

So che questo può sembrare ovvio o non necessario, ma ho sbattuto la testa contro lo stesso problema e la sequenza clean/delete/delete l'ha risolto.

+1

Stava parlando di app web, non app native. –

1

Hai provato a utilizzare le query multimediali relative al rapporto pixel nel tag link?

media="only screen and (-webkit-min-device-pixel-ratio: 2)" per il display retina uno.

+0

È un'idea intelligente, ma anche senza l'attributo multimediale, un'immagine 640x920 non funziona su un display retina. Penso che sia probabile che non sia supportato al momento. Almeno i miei test, non l'ho gestito. Vedere la [documentazione] (http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html). Spero che lo aggiungeranno in una versione successiva di iOS. – theazureshadow

+0

Dannatamente male, basta spostarsi per impostare la schermata iniziale per la mia app ora e sembra sgranata. –

0

iPad:

link rel="apple-touch-startup-image" sizes="768x1004" href=""/
iPhone Retina Display: link rel="apple-touch-startup-image" sizes="640x960" href=""/
+1

aggiungere le parentesi –

21

non ho mai pensato che avrei avuto questo lavoro, ma per qualche ragione, si afferma in tutto il mondo on-line che le dimensioni immagini ad alta risoluzione sono 640x960, in realtà sono 640x920. Quando apporti questa modifica, la schermata iniziale ad alta risoluzione apparirà correttamente sui display retina. Di seguito è riportato il codice esatto che utilizzo nella nostra app. Abbiamo degli splash screen che funzionano su iPad1/iPad2 Portrait and Landscape, iPhone3/iPhone4

Spero che questo aiuti qualcuno.

<!-- iOS Device Startup Images --> 
<!-- iPhone/iPod Touch Portrait – 320 x 460 (standard resolution) --> 
<link rel="apple-touch-startup-image" href="splash-screen-320x460.png" media="screen and (max-device-width: 320px)" /> 

<!-- iPhone/iPod Touch Portrait – 640 x 920 pixels (high-resolution) --> 
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="splash-screen-640x920.png" /> 

<!-- For iPad Landscape 1024x748 --> 
    <!-- Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).--> 
<link rel="apple-touch-startup-image" sizes="1024x748" href="splash-screen-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" /> 

<!-- For iPad Portrait 768x1004 --> 
<link rel="apple-touch-startup-image" sizes="768x1004" href="splash-screen-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"/>