it-swarm.com.de

Phonegap Anwendungstext und Layout zu klein

Ich habe vor kurzem eine Android-App mit HTML, CSS, Javascript und deren Ausführung über Phonegap erstellt, um die eigentliche App zu erstellen. Eines der Probleme, denen ich in einem Telefon begegnet bin, ist, dass der Text zu klein aussieht. Einige Bilder sind auch etwas klein. Ich habe ein Viewport-Meta-Tag hinzugefügt, aber es scheint auch nicht zu funktionieren. Hier sind die 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" />`

So sieht es aus
This happens in a particular phone(Samsung Galaxy)

So soll es aussehen:
This is how it looks in htc wildfire s

51
lomas09

Ich hatte das gleiche Problem und löste es, den Viewport zu ändern ... Ich dachte auch, dass das Problem Phonegap war, aber es war wirklich so, dass die zum Testen verwendeten Geräte unterschiedliche dpi hatten.

Meine Lösung bestand darin, das Ziel-Dichte-dpi im Ansichtsfenster in Folgendes zu ändern:

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

Ich hoffe es hilft

144
MazarD

Ich hatte ein ähnliches Problem und habe einige Nachforschungen angestellt, von denen ich dachte, dass sie es wert sind, geteilt zu werden:

  • Setzen Sie den target-densitydpi des Ansichtsfensters wie bereits vorgeschlagen auf medium-dpi (= 160dpi). Dies virtualisiert die px-Einheit, z. 1px in html/css entspricht dann 2 physischen Pixeln auf einem 320-dpi-Gerät. Beachten Sie, dass Bilder auch skaliert (und unscharf) sind.

    <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: Verwenden Sie Medienabfragen, um das bedingte Styling zu implementieren. Die Anpassung an unterschiedliche Bildschirmgrößen in Abhängigkeit von Breite, Höhe, Ausrichtung oder Ausrichtung ist unkompliziert. Unterschiedliche Pixeldichten können mit device-pixel-ratio behandelt werden (dank Marc Edwards für ein Beispiel: 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 */
    }
    

    Die Medienfunktion resolution ist sauberer als device-pixel-ratio, es fehlt jedoch die Unterstützung für mobile Browser.

  • Javascript: Anpassen von Tastengrößen, Bildern usw. basierend auf window.devicePixelRatio und window.screen.width und window.screen.height. Das Layouting per Javascript wird als schlechte Praxis betrachtet. Während des Ladens kann auch ein Flimmern auftreten, wenn die Ausführung nach dem Ereignis pageload beginnt.

  • -webkit-image-set und image src-set erleichtern die Bereitstellung hochauflösender Bilder für Retina-Displays, siehe http://www.html5rocks.com/de/mobile/high-dpi/#toc-bff . Die Browser-Unterstützung ist begrenzt.

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

Es scheint, dass das Entfernen von target-densitydpi insgesamt die besten Ergebnisse bringt. 

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

In den meisten Fällen sollte dies mehr als ausreichend sein, um das Erscheinungsbild Ihrer App zu steuern.

5

target-densitydpi = medium dpi Für uns gearbeitet.

Szenario Dieses Problem wurde durch ein Upgrade von PhoneGap 2.2 auf 3.3 behoben. 

4
apachebite

Aktualisierte Antwort: für Android

Das Problem ist auf Android-Geräten mit diesen Accessibilly -Einstellungen. Sie können versuchen, die Schriftgröße (Suche Schriftgröße unter Android-Einstellung) zu ändern und Ihre App erneut auszuführen.

So werden Ihre Schriften in der App als Ihre Einstellung geändert

 Accessibilly font size


Hier ist also eine Lösung für Cordova

Use:mobiler Zugriff zum Deaktivieren von PreferredTextZoom

Installieren Sie mobile-accessibility in Ihrem Cordova-Projekt

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

Und JS Part ist so etwas wie:

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

Für Windows Phone (WP8) habe ich folgende Lösung gefunden: https://github.com/phonegap/phonegap-app-developer/issues/92

  1. zu css hinzufügen: @ -ms-viewport {Breite: Gerätebreite; } 
  2. zu HTML hinzufügen: <meta name="viewport" content="width=device-width, initial-scale=1" />
  3. zu Patch IE 10 hinzufügen:

    (function () { if ("-ms-user-select" in 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 (" head ") [ 0] .appendChild (msViewportStyle); } }) ();

0
Gerfried