Phonegap Le texte et la présentation de l'application sont trop petits

Question

J'ai récemment créer une application android à l'aide de html, de css, de javascript et de les exécuter à travers phonegap pour créer l'application. L'un des problèmes que j'ai rencontré dans un téléphone, c'est que le texte est trop petit. Aussi certaines images sont un peu petites. J'ai ajouté une fenêtre d'affichage de la balise meta mais il ne semble pas y travailler. Voici les meta tags:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />`

C'est à quoi il ressemble

C'est comment sa censé ressembler:

Answer 1

J'ai eu le même problème et l'ai résolu en changeant la fenêtre. Je pensais également que le problème était l’écart téléphonique, mais c’est vraiment que les appareils utilisés pour les tests avaient une résolution différente.

Ma solution consistait à modifier la densité cible-cible dans la fenêtre d'affichage en:

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

J'espère que ça aide

Answer 2

J'ai eu un problème similaire et fait quelques recherches j'ai pensé est le partage de la valeur:

• Définissez la fenêtre d'affichage du target-densitydpi de medium-dpi (=160dpi), comme l'a déjà suggéré. Cette virtualise l' px unité de, par exemple, 1px en html/css correspond alors à 2 physique de pixels sur un 320dpi appareil. Notez que les images sont mises à l'échelle (et floue).

  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
  

• CSS: Utiliser les media queries pour mettre en œuvre conditionnelle style. L'adaptation de la taille de l'écran dépend de la largeur, de hauteur, d'aspect ou d'orientation est straight-forward. Différentes densités de pixels peut être manipulé avec des device-pixel-ratio (merci à Marc Edwards pour la fourniture d'un exemple: https://gist.github.com/marcedwards/3446599).

  @media screen and (-webkit-min-device-pixel-ratio: 1.5),
         screen and (-o-min-device-pixel-ratio: 15/10)
  {
    body { background-image: ... } /* provide high-res image */
  }
  

  Les médias disposent d' resolution est plus propre que l' device-pixel-ratio, mais il manque un navigateur mobile de soutien.

• Javascript: Adapter la taille des boutons, les images, etc. basé sur window.devicePixelRatio et window.screen.width et window.screen.height. Layouting par Javascript est considéré comme une mauvaise pratique. Aussi le scintillement peut entraîner cours de chargement que l'exécution commence après l' pageload événement.

• -webkit-image-set et de l'image src-set le rendre facile pour fournir des images à haute résolution pour les écrans retina, voir http://www.html5rocks.com/en/mobile/high-dpi/#toc-bff. Prise en charge du navigateur est limitée.

   background-image: -webkit-image-set(
     url(icon1x.jpg) 1x,
     url(icon2x.jpg) 2x
   );
  

Answer 3

Il semble que la suppression totale des target-densitydpi apporte les meilleurs résultats.

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

Cela devrait être plus que suffisant pour contrôler l'apparence de votre application dans la plupart des cas.

Answer 4

target-densitédpi = medium-dpi Travaillé pour nous.

Scénario Problème rencontré lors de la mise à niveau de PhoneGap 2.2 à 3.3.

Answer 5

L'ajout de cette solution ici

Pour moi, un texte rendu vraiment grand, d'autres sont à la bonne taille. Le problème était avec l'utilisation de rem valeurs pour la taille de police dans le css. Pour une raison quelconque, des éléments où la taille de police est la valeur de base (défini dans le corps) ont été rendus plus grand que ce qu'ils devraient.

Le correctif a été pour attribuer une valeur globale pour le rem taille de police dans un élément wrapper pour l'ensemble du site.

(mon .taille de police(1.4) n'est qu'un mixin rendu: font-size: 1.4 rem; )

Donc, ce

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

h1 {
  .font-size(2.6);
}

Peut être fixé avec ce

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

.wrapper {
  .font-size(1.4);
}

h1 {
  .font-size(2.6);
}