PhoneGap, jQuery Mobile e Retina Display

Question

Sto lavorando a un'applicazione PhoneGap utilizzando jQuery Mobile. Attualmente sto testando solo i simulatori Retina per iPhone e iPhone.

Quando apro l'applicazione in modalità Retina, la densità dell'applicazione è corretta ma la pagina è solo metà della dimensione dello schermo su entrambe le dimensioni.

La mia ipotesi è che i css di jQuery Mobile non scalino le larghezze e le altezze, ma non sono stato in grado di trovare nulla a riguardo.

mio HTML ha questo:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 

E poi ho eseguire questa Javascript:

if ($.mobile.media("screen and (min-width: 320px)")) { 
    if ($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) { 
     $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5'); 
    } 
} 

Che cosa mi manca?

Answer 1

Penso che tu stia indovinando corretto.

Guarda il file JQM.css.

Include solo le query multimediali per le icone ad alta risoluzione/lo-res. Tutto il resto è "così com'è" sui dispositivi retina e non retina, quindi JQM supporta solo retina in termini di dimensioni dell'icona.

Specificando initial-scale=.5, maximum-scale=.5, minimum-scale=.5 si blocca tutto al 50%. Quindi c'è la mezza pagina non scalabile.

Più si adattano ai dispositivi retina ("high-end") più problemi si avranno con i browser standard (in particolare "low end", come IE7). Verifica il posizionamento di jQM iconsprite in IE7, ad esempio: se non includi uno script come respond.js per supportare le query multimediali, le icone saranno off-postion.

Penso che attualmente non ci siano abbastanza dispositivi di retina per garantire che JQM fornisca una retina cross-browser e una soluzione non retina.

Ho trovato alcune buone informazioni here. Ho anche fatto un solo CSS iOS tab-bar, che funziona fino a IE7.

Controllare il codice CSS richiesto nel mio plug-in per rendere le icone e gli sfondi sfumati belli su tutti i browser e la quantità di extra CSS necessari per personalizzare IE7 + 8. Un file JQM.css di retina/non-retina sarebbe bello da avere ma difficile da scaricare :-)

Answer 2

Nel tuo caso devi scegliere come target solo le immagini e non l'intera finestra. le immagini devono essere ridotte a metà rispetto al normale display.