PhoneGap, jQuery Mobile y Retina Display

Question

Estoy trabajando en una aplicación PhoneGap usando jQuery Mobile. Actualmente solo estoy probando en los simuladores de retina de iPhone y iPhone.

Cuando abro la aplicación en modo Retina, la densidad de la aplicación es correcta pero la página tiene solo la mitad del tamaño de la pantalla en ambas dimensiones.

Mi propia conjetura es que el css de jQuery Mobile no escala los anchos y las alturas, pero no he podido encontrar nada al respecto.

Mi HTML tiene esto:

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

Y luego ejecutar esta 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'); 
    } 
} 

¿Qué me falta?

Answer 1

Creo que está adivinando correctamente.

Mire el archivo JQM.css.

Solo incluye consultas de medios para los iconos de alta resolución/baja resolución. Todo lo demás está "tal cual" en los dispositivos retina y no retina, por lo que JQM solo admite retina en términos de tamaño de icono.

Al especificar initial-scale=.5, maximum-scale=.5, minimum-scale=.5, está bloqueando todo al 50%. Entonces, está su media página no escalable.

Cuanto más se adapte para dispositivos retina ("high-end"), más problemas tendrá con los navegadores estándar (especialmente "low end", como IE7). Compruebe el posicionamiento de JQM iconsprite en IE7, por ejemplo: si no incluye un script como respond.js para admitir consultas de medios, los iconos estarán desactivados.

Creo que actualmente no hay suficientes dispositivos de retina para garantizar que JQM proporcione una solución retina y no retina entre navegadores.

Encontré una buena información here. También hice un CSS-only iOS tab-bar, que funciona hasta IE7.

Compruebe el CSS requerido en mi complemento para que los iconos y fondos de degradado se vean bien en todos los navegadores y la cantidad de extras CSS necesarios para personalizar para IE7 + 8. Un archivo JQM.css de retina/no retina sería agradable de tener, pero difícil de descargar :-)

Answer 2

En su caso, tiene que orientar las imágenes solamente y no toda la ventana gráfica. las imágenes tienen que reducir a la mitad el tamaño de su pantalla normal.