web-dev-qa-db-fra.com

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

J'ai récemment construit une application Android utilisant html, css, javascript et les exécutant via phonegap pour créer l'application réelle. L'un des problèmes que j'ai rencontré dans un téléphone est que le texte semble trop petit. De plus, certaines images sont un peu petites. J'ai ajouté une balise méta viewport mais cela ne semble pas fonctionner non plus. Voici les balises META:

    <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" />`

Voici à quoi ça ressemble
This happens in a particular phone(Samsung Galaxy)

Voici à quoi est censé ressembler:
This is how it looks in htc wildfire s

javascripthtmlcssjquery-mobilecordova
51
lomas09

J'avais le même problème et je l'ai résolu en changeant la fenêtre d'affichage . Je pensais aussi que le problème était un écart de téléphone, mais en réalité, 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

144
MazarD

J'ai eu un problème similaire et j'ai fait quelques recherches qui méritaient d'être partagées:

  • Définissez le target-densitydpi de la fenêtre d'affichage sur medium-dpi (= 160dpi), comme suggéré précédemment. Ceci virtualise l'unité px, par exemple. 1px en html/css correspond alors à 2 pixels physiques sur un périphérique de 320 dpi. Notez que les images sont également redimensionnées (et floues).

    <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: Utilisez des requêtes de média pour implémenter un style conditionnel. L'adaptation à différentes tailles d'écran en fonction de la largeur, de la hauteur, de l'aspect ou de l'orientation est simple. device-pixel-ratio permet de traiter différentes densités de pixels (merci à Marc Edwards de fournir 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 */
}

    La fonctionnalité multimédia resolution est plus propre que device-pixel-ratio, mais elle ne prend pas en charge le navigateur mobile.

  • Javascript: adapter la taille des boutons, les images, etc. en fonction de window.devicePixelRatio et window.screen.width et window.screen.height. La mise en page par Javascript est considérée comme une mauvaise pratique. Un scintillement peut également survenir pendant le chargement, car l'exécution commence après l'événement pageload.

  • -webkit-image-set et image src-set permettent de fournir facilement des images haute résolution pour les écrans Retina, voir http://www.html5rocks.com/en/mobile/high-dpi/#toc-bff . La prise en charge du navigateur est limitée.

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

Il semble que la suppression du 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.

5
Francesco Frapporti

densité-cibledpi = Moyenne-dpi Travaillé pour nous.

Scénario Ce problème a été résolu lors de la mise à niveau de PhoneGap 2.2 à 3.3. 

4
apachebite

Réponse mise à jour: pour Android

Le problème est sur les appareils Android a ce Accessibilly paramètres, vous pouvez essayer de changer la taille de la police (recherche taille de la police sur le paramètre Android) et relancez votre application.

Ainsi, vos polices sur l'application seront modifiées en fonction de vos paramètres

 Accessibilly font size

Alors, voici une solution pour Cordova

Utiliser:mobile-accessibility pour désactiver PreferredTextZoom

Installez mobile-accessibility sur votre projet Cordova

$ cordova plugin add https://github.com/phonegap/phonegap-mobile-accessibility.git

Et JS part est quelque chose comme:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
   if (window.MobileAccessibility) {
      window.MobileAccessibility.usePreferredTextZoom(false);
   }
}
1
l2aelba

Pour Windows Phone (WP8), j'ai trouvé la solution suivante: https://github.com/phonegap/phonegap-app-developer/issues/92

  1. ajouter à css: @ -ms-viewport {width: device-width; } 
  2. ajouter au code HTML: <meta name="viewport" content="width=device-width, initial-scale=1" />

  3. ajouter au patch IE 10:

    (function () { if ("-ms-user-select" dans document.documentElement.style && navigator.userAgent.match (/IEMobile/10.0/)) { var msViewportStyle = document.createElement (" style "); msViewportStyle.appendChild ( document.createTextNode (" @ - ms-viewport {width: auto! important} ") ); document.getElementsByTagName (" tête ") [ 0] .appendChild (msViewportStyle); } }) ();

0
Gerfried