Mise à l'échelle d'une application Phonegap pour différentes tailles / densités d'écran Android?

J'ai un Phonegap application conçue pour fonctionner sur les téléphones Android et les tablettes. L'échelle du texte et des images a l'air bien sur un téléphone, mais trop petite sur une tablette 7”.

Est-il un moyen de définir l'échelle pour les différentes tailles d'écran/des densités qui travaille pour une Phonegap application basée? Pour un natif de l'application pour Android, plusieurs présentations de l'écran (comme mentionné dans le android docs) pourrait être une solution, mais cela peut-il être utilisé pour un Phonegap application basée?

Je pourrais utiliser les CSS media queries pour définir des tailles de police basée sur la taille de l'écran, mais je tiens à l'échelle de l'ensemble de l'interface (y compris les images) proportionnellement.

J'ai essayé d'utiliser le CSS zoom propriété avec des requêtes de média cible les tailles d'écran, mais cette vis jusqu'à positionnement absolu et interfère avec la fonction des éléments d'INTERFACE utilisateur tels que iScroll:

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

J'ai aussi essayé d'utiliser le targetdensity-dpi meta viewport de la propriété - en l'ajustant à 120 ppp rend l'échelle de mieux en mieux sur la tablette 7”, mais trop grand sur le téléphone. Puisque c'est codé en dur dans le HTML plutôt que les CSS, les requêtes de média ne peut pas être utilisée pour faire varier basé sur la taille de l'écran:

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

Voici quelques captures d'écran à partir d'un cas de test app Phonegap:

source d'informationauteur DaveAlden

  1. 21

    Avant de nous abandonner sur phonegap permet d'essayer de l'améliorer.
    J'ai été coincé jusqu'à ce que je l'ai résolu en utilisant cette solution.

    Changer votre fenêtre à ceci :

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

    Ref : L'Application Phonegap texte et mise en page trop petit

  2. 4

    Viens de remarquer que je n'ai jamais répondu à cette question. La solution que j'ai utilisé dans la fin a été d'utiliser les media queries pour définir explicitement les tailles de police et des actifs d'image basé sur la taille de l'instrument. Appareil essais ont montré que cette travaillé sur tous mes appareils: iPhone, iPad, téléphones Android, Android tablettes 7", Android 10" des tables. Espérons que cela aide quelqu'un d'autre.

    Par exemple:

    /* 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');
    }
}
  3. 2

    Considérer que cible-densitydpi a été désapprouvée et retiré de Webkit selon Pete LePage (https://plus.google.com/+GoogleChromeDevelopers/posts/BKHdSgQVFBB), je pense qu'une meilleure approche est d'utiliser les media queries pour objectif de haute résolution des appareils avant de tomber phonegap

  4. 1

    J'ai un couple de différentes solutions à suggérer:

    1. Changement de fenêtre dynamiquement à l'aide de Javascript (plus d'info ici)

    2. Ensemble de toutes tailles dans rem unités plutôt que px. Ensuite, vous pouvez mettre à l'échelle tout en ajustant document de taille de police. Esquissant un exemple:

      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';
}