icono - ¿Está escalando una aplicación de Phonegap para diferentes tamaños/densidades de pantalla de Android?

phonegap build

Question

Tengo una aplicación Phonegap diseñada para funcionar en teléfonos y tabletas Android. La escala de texto e imágenes se ve bien en un teléfono, pero demasiado pequeña en una tableta de 7 ".

¿Hay una manera de establecer la escala para diferentes tamaños / densidades de pantalla que funcione para una aplicación basada en Phonegap? Para una aplicación nativa de Android, los diseños de pantalla múltiples (como se menciona en los documentos de Android ) serían una solución, pero ¿se puede utilizar para una aplicación basada en Phonegap?

Podría usar consultas de medios CSS para establecer tamaños de fuente según el tamaño de la pantalla, pero quiero escalar la interfaz completa (incluidas las imágenes) de manera proporcional.

Intenté usar la propiedad de zoom CSS junto con las consultas de los medios para apuntar a tamaños de pantalla específicos, pero esto arruina la posición absoluta e interfiere con la función de los elementos de la interfaz de usuario como iScroll:

@media only screen and (min-device-width : 768px) {
    body{
        zoom: 125%;
    }   
}
@media only screen and (min-device-width : 1024px){ 
    body{
        zoom: 150%;
    }
}

También traté de usar la targetdensity-dpi meta viewport targetdensity-dpi : ajustarlo a 120 ppp hace que la escala sea mejor en la tableta de 7 ", pero demasiado grande en el teléfono. Debido a que está codificado de forma rígida en HTML en lugar de CSS, las consultas de medios no pueden utilizarse para variarlo según el tamaño de la pantalla:

<meta name="viewport" 
   content="width=device-width, initial-scale=1, targetdensity-dpi=120dpi">

Aquí hay algunas capturas de pantalla de una aplicación Phonegap de testcase:

• HTC HD2, densidad de destino = predeterminado
• HTC HD2, densidad de destino = 120 ppp
• Nexus 7, target-density = default
• Nexo 7, densidad objetivo = 120 ppp

Answer 1

Antes de renunciar a phonegap vamos a intentar mejorarlo. Me quedé atascado hasta que lo resolví usando esta solución.

Cambie su ventana gráfica a esto:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

Ref: Phonegap Aplicación de texto y diseño demasiado pequeño

Answer 2

Considere que target-densitydpi ha sido desaprobado y eliminado de Webkit de acuerdo con Pete LePage ( https://plus.google.com/+GoogleChromeDevelopers/posts/BKHdSgQVFBB ), creo que un mejor enfoque es utilizar consultas de medios para apuntar a ppp de alta resolución dispositivos antes de soltar phonegap

Answer 3

Solo noté que nunca respondí esto. La solución que utilicé al final fue utilizar consultas de medios para establecer explícitamente los tamaños de fuente y los recursos de imagen según el tamaño del dispositivo. Las pruebas de dispositivos mostraron que esto funcionó en todos mis dispositivos de destino: iPhone, iPad, teléfonos Android, tabletas Android 7 ", tablas Android 10". Espero que ayude a alguien más.

Por ejemplo:

/* Start with default styles for phone-sized devices */
    p,li{
        font-size: 0.9em;
    }
    h1{
        font-size: 1.2em;
    }
    button{
        width: 24px;
        height: 12px;
    }
    button.nav{
        background-image: url(''img/phone/nav.png'');
    }

@media only screen and (min-device-width : 768px) { /* 7" tablets */
    p, li{
        font-size: 1.3em !important;
    }
    h1{
        font-size: 1.6em !important;
    }
    button{
          width: 32px;
          height: 16px;
    }
    button.nav{
        background-image: url(''img/tablet7/nav.png'');
    }
}
@media only screen and (min-device-width : 1024px) { /* 10" tablets and iPad */
    p, li{
        font-size: 1.5em !important;
    }
    h1{
        font-size: 1.8em !important;
    }
    button{
        width: 48px;
        height: 24px;
    }
    button.nav{
        background-image: url(''img/tablet10/nav.png'');
    }
}

Answer 4

Tengo un par de soluciones diferentes para sugerir:

1. Cambiar la ventana gráfica dinámicamente usando Javascript ( más información aquí )

2. Establecer todos los tamaños en unidades rem en lugar de px . Luego puede escalar todo ajustando el tamaño de fuente del documento. Dibujando un ejemplo:

   function resize() {
   var w = document.documentElement.clientWidth;
   var h = document.documentElement.clientHeight;
   var styleSheet = document.styleSheets[0];
   // ar = aspect ratio h/w; Replace this with your apps aspect ratio
   var ar = 1.17;
   // x = scaling factor
   var x = 0.1; 
   var rem;
   if (h / w > ar) { // higher than aspect ratio
       rem = x * w;
   } else { // wider than aspect ratio
       rem = x * h;
   }
   document.documentElement.style.fontSize = rem + ''px'';
   }