Rendere il contenuto di scala e di forma con PhoneGap (utilizzando viewport)

Sto cercando di adattare e la porta di un vecchio progetto PhoneGap.

Finora, il progetto funziona correttamente con il browser Android ma non con PhoneGap perché non adattare il contenuto per adattarlo l’intero schermo. Sempre lasciare uno spazio vuoto e non è quello che io vorrei. PhoneGap non sembrano prestare attenzione alla mia proprietà di visualizzazione nel metatag sto usando.

Ho fatto alcuni test per scoprire il problema, senza alcun tipo di risultato.

Per esempio, il seguente test, contiene due file: index.html e config.xml

Contiene un DIV che è di 276 pixel di larghezza e vorrei PhoneGap per farla entrare tutta la pagina come Android browser.

A proposito, sto utilizzando PhoneGap Build sito web per costruire questo test online.

Qui è il contenuto del index.html file (non sto usando DOCTYPE per rendere più semplice, ma anche utilizzando non funziona correttamente):

<html>
    <head>
        <meta name="viewport" content="width=276, user-scalable=yes" />
        <title>Title</title>
    </head>
    <body>
        <div style="width:276px; background-color:orange;">I want to make this div fit to the page</div>
    </body>
</html>

E questo è il contenuto del config.xml file (nota la preferenza EnableViewportScale impostato su “true”, ma anche essere impostato a “si” non funziona):

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.phonegap.example"
        versionCode="10" 
        version   = "1.0.0">

    <!-- versionCode is optional and Android only -->

    <name>PhoneGap Example</name>

    <description>
        An example for phonegap build docs. 
    </description>

    <author href="https://build.phonegap.com" email="[email protected]">
        Hardeep Shoker 
    </author>

    <preference name="EnableViewportScale" value="true" />
</widget>

In modo che è. C’è qualcosa che sto facendo di sbagliato? Come posso raggiungere quello che sto cercando di fare? Sono sicuro che deve avere una soluzione abbastanza semplice ma non riesco a trovare in questo momento.

Vi ringrazio molto in anticipo e chiedo scusa per il mio inglese, non è la mia lingua madre.

Applausi,
Joan

InformationsquelleAutor jalbam | 2013-04-10

2 Replies
  1. 1

    Provare

    <meta name="viewport" content="width=276, user-scalable=1" />

    o
    Se aggiungi le seguenti righe al vostro onCreate() metodo:

    WebSettings settings = this.appView.getSettings();
    settings.setSupportZoom(true);
    settings.setBuiltInZoomControls(true);

    o
    provare a utilizzare iScroll 4 (http://cubiq.org/iscroll-4)
    Pinch /Zoom

    InformationsquelleAutor yves

  2. 1

    Ho quasi rinunciato, quando mi sono imbattuto in questo post:
    http://antonylees.blogspot.com/2012/06/phonegap-viewport-size-is-too-small-on.html

    Fondamentalmente ho modificato il mio di default AndroidManifest.xml voce:

    <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />

    per

    <uses-sdk android:minSdkVersion="7" />

    Si può giocare con la versione un po ‘ lil. Basta non bersaglio versione 19 credo. Inoltre si può aggiungere

    target-densitydpi=device-dpi
    target-densitydpi=medium-dpi
    ...

    Per il meta tag viewport, a seconda di che cosa stai cercando di fare.


    MODIFICA:
    Ok, ecco un exploanation: http://developer.android.com/guide/webapps/migrating.html
    Dal momento che Android 4.4 (KitKat), WebView è cambiato con uno nuovo basato su chromium. Avendo la versione di destinazione al di sotto di 19, webview è impostato in modalità non standard.

    Nota: Se il vostro targetSdkVersion è impostato a “18” o inferiore, WebView
    opera in “modalità standard” per evitare alcuni comportamenti
    le modifiche descritte di seguito, il più vicino possibile—pur fornendo
    la tua app le prestazioni e gli standard web gli aggiornamenti. Attenzione, però,
    che singolo e colonna stretta e di layout predefiniti livelli di zoom non sono
    sono supportati su Android 4.4
    , e ci possono essere altri comportamentali
    differenze che non sono stati identificati, in modo da essere sicuri di testare la tua app
    su Android 4.4 o superiore, anche se si mantiene il vostro targetSdkVersion set di
    “18” o inferiore.

    PP: con LG L70 telefono.

    InformationsquelleAutor NibbleByte

Lascia un commento