Skalieren und Anpassen von Inhalten mit PhoneGap (mithilfe des Ansichtsfensters)

Question

Apr 10, 2013, 02:28 PM

Skalieren und Anpassen von Inhalten mit PhoneGap (mithilfe des Ansichtsfensters)

Ich versuche, ein altes Projekt an PhoneGap anzupassen und zu portieren.

Bisher funktioniert das Projekt unter Android-Browsern einwandfrei, mit PhoneGap jedoch nicht, da der Inhalt nicht an den gesamten Bildschirm angepasst wird. Es bleibt immer ein Leerzeichen und das würde ich nicht wollen. PhoneGap scheint meine Ansichtsfenster-Eigenschaft in dem von mir verwendeten Metatag nicht zu beachten.

Ich habe einige Tests durchgeführt, um das Problem ohne Ergebnis herauszufinden.

Der folgende Test enthält beispielsweise nur zwei Dateien: index.html und config.xml

Es enthält einen DIV, der 276 Pixel breit ist, und ich möchte, dass PhoneGap so auf die gesamte Seite passt, wie es die Android-Browser tun.

Übrigens verwende ich die PhoneGap Build-Website, um diesen Test online zu erstellen.

Hier ist der Inhalt der Datei index.html (Ich verwende DOCTYPE nicht, um es einfacher zu machen, aber selbst wenn ich es verwende, funktioniert es nicht richtig):

<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>

Und dies ist der Inhalt der Datei config.xml (beachten Sie, dass die Einstellung EnableViewportScale auf "true" gesetzt ist, aber selbst "yes" nicht funktioniert):

<?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>

Also das ist. Gibt es etwas, was ich falsch mache? Wie kann ich herausfinden, was ich zu tun versuche? Ich bin mir sicher, dass es eine ziemlich einfache Lösung geben sollte, aber ich kann sie momentan nicht finden.

Vielen Dank im Voraus und Entschuldigung für mein Englisch, es ist nicht meine Muttersprache.

Prost, Joan