web-dev-qa-db-fra.com

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

J'ai une application Phonegap conçue pour fonctionner sur Android. L'échelle du texte et des images semble bonne sur un téléphone, mais trop petite sur une tablette de 7 pouces.

Existe-t-il un moyen de définir l'échelle pour différentes tailles/densités d'écran qui fonctionne pour une application basée sur Phonegap? Pour une Android Android native, plusieurs dispositions d'écran (comme mentionné dans les documentation Android ) seraient une solution, mais cela peut-il être utilisé pour une application basée sur Phonegap?

Je pourrais utiliser des requêtes de médias CSS pour définir des tailles de police en fonction de la taille de l'écran, mais je veux mettre à l'échelle l'ensemble de l'interface (y compris les images) proportionnellement.

J'ai essayé d'utiliser la propriété CSS zoom avec des requêtes multimédias pour cibler des tailles d'écran spécifiques, mais cela bouscule le 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 également essayé d'utiliser le targetdensity-dpi propriété meta viewport - l'ajuster à 120 dpi améliore l'échelle sur la tablette 7 ", mais trop grande sur le téléphone. Étant donné que ce code est codé en HTML plutôt qu'en CSS, les requêtes multimédias ne peuvent pas être utilisées pour le faire varier en fonction de la taille de l'écran:

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

Voici quelques captures d'écran d'une application Phonegap de testcase:

androidcsscordovascaledpi
17
DaveAlden

Je viens de remarquer que je n'ai jamais répondu à cela. La solution que j'ai utilisée à la fin était d'utiliser des requêtes multimédias pour définir explicitement les tailles de police et les ressources d'image en fonction de la taille de l'appareil. Les tests des appareils ont montré que cela fonctionnait sur tous mes appareils cibles: iPhone, iPad, Android, Android 7 ", Android = 10 "tables. J'espère 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');
    }
}
4
DaveAlden

Avant de renoncer à l'interphone, essayons de l'améliorer. J'étais coincé jusqu'à ce que je le résolve en utilisant cette solution.

Modifiez votre fenêtre d'affichage comme suit:

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

Réf: Texte et mise en page de l'application Phonegap trop petits

22
Kennedy Nyaga

Considérez que target-densitydpi a été déconseillé et supprimé de Webkit selon Pete LePage ( https://plus.google.com/+ GoogleChromeDevelopers/posts/BKHdSgQVFBB ), je pense qu'une meilleure approche consiste à utiliser les requêtes multimédias pour cibler les appareils à haute résolution avant de supprimer l'intervalle téléphonique

2
JohnFalcon

J'ai quelques solutions différentes à suggérer:

  1. Changer la fenêtre d'affichage dynamiquement en utilisant Javascript ( plus d'informations ici )

  2. Définissez toutes les tailles en unités rem plutôt qu'en px . Ensuite, vous pouvez tout mettre à l'échelle en ajustant la taille de la police du document. Esquisser 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';
}
1
Per Quested Aronsson