Banner per mobile

[fermat]

dovrei creare alcune pagine per il mobile.
penso di usare jquery mobile.
queste pagine le dovrei caricare poi dentro applicazioni iphone, ipad e android.
il mio dilema è la dimensione di suddetti banner.
ogni schermo ha una sua dimensione quindi come fare una distinzione???

[Caiodark]

Iphone e Ipad hanno ciascuno 4 dimensioni di schermo (a seconda che abbiano o meno il retina display e se siano in landscape o portrait). Android sta al produttore quindi non hai un riferimento fisso.

Utilizzerei media query per testare la larghezza della pagina.

Realizzerei poi 3 o 4 layout diversi da applicarsi in rispettivi scaglioni di larghezza schermo (p.e. oltre 1024, da 1024 a 800... sotto i 400) centrando il contenuto qualora lo schermo fosse più largo.
Questo approccio lo vedo parecchio utilizzato perché non fa una distinzioni tra apparati, scegliendo opportunamente gli scaglioni di larghezza Iphone e Ipad vengono supportati facilmente e non ti verrà il mal di testa per tutti gli smartphone o tablet che usciranno con Android.

[fermat]

si infatti il problema maggiore riguarda android che ha una marea di cellulari diversi.
grazie per il consiglio!!!

[fermat]

torno sull'argomento perchè c'è qualcosa che nn quadra.
prendiamo questa regola:

@media screen and (max-device-width: 1024px) {
    #logo {
        margin: 0 auto;
        width: 100%;
        height: 335px;
        background: url(../images/logo_1024.png) no-repeat center center; 
    }
}

se apro il pc che ha una risoluzione a 1024x768 vedo tutto bene.
se apro la stessa pagina su un Samsung Galaxy SII invece lo sfondo sfora di parecchio.
l'immagine di sfondo ha una risoluzione di 1000x335.
a questo punto mi chiedo dove sia l'errore.
cioè, di che dimensione dovrei fare l'immagine?