Html 5 WebApp Skalierbarkeit Meta-Tag

Ich arbeite derzeit an einer Html 5 WebApp. Die ganze app funktioniert völlig in Ordnung, mit Ausnahme der Skalierung (Zooming). Ich platziert haben die folgenden Meta-Tags auf meiner WebApp-Seite,

<meta name="viewport" content="user-scalable=yes; width=device-width; height=device-height; initial-scale=1.0;" />

Nach viel Forschung, die ich habe kommen zu dem Schluss, dass diese Meta-tags sind in Erster Linie für die iPhone-version von safari. Jedoch, das problem, das ich erlebe, ist, während ein iPhone-Nutzer ist auf meiner Seite, Vorherige, um Lesezeichen für die WebApp auf dem home-Bildschirm, der Benutzer ist nicht in der Lage, vergrößern oder verkleinern (mit dem kneifen Bewegung). Der einzige Weg, das scheint, zum erstellen einer Zoom-in-Effekt, wenn der Benutzer ändert die Ausrichtung Ihres Telefons.

Ich habe getestet dieses meta-tag nicht nur mit einem Apple Gerät und einem Android-Gerät. Das Android-Gerät Zoomen deaktiviert, wenn der Benutzer-skalierbare = no"), und erlaubt das Zoomen, wenn user-scalable=yes, während das Apple-Gerät nie erlaubt das Zoomen in den beiden Testfällen.

Meine Fragen Sind:

  1. Sind diese Meta-Tags in Erster Linie für die iPhone-Safari-Browser?
  2. Bin ich richtig mit dem obigen Meta-Tag?
  3. Wenn ich das nicht bin, Was ist der richtige Weg, um das Meta-Tag verwenden?

    Vielen Dank für Ihren Rat im Voraus!

InformationsquelleAutor Byron Walker | 2011-06-21

  1. 13

    Ich könnte falsch sein, aber ich glaube nicht, müssen Sie die user-scalable Linie. Haben Sie versucht, zu entfernen, und sehen, was passiert? So etwas ist in der Regel ausreichend:

    <meta name="viewport" content="width=device-width" />

    ... und dann vielleicht ein tweak von dort. Wenn Sie tun verwenden möchten, müssen alle Attribute, die versuchen, die Trennung mit einem Komma statt einem Semikolon. Zum Beispiel:

    <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />
    Vielen Dank, deine Lösung das problem behoben. Ich entfernte die user-scalable-tag geändert und das Semikolon zu Kommas.
    Ich würde Stimmen, aber ich habe nicht eine ausreichend hohe reputation zu tun.
    Keine Sorge; vielen Dank für Ihr kommen zurück und lassen Sie uns wissen, Sie haben diese sortiert.
    Ich habe ähnliche situation. Ich möchte, dass meine webapp zu haben zoom aktiviert, aber und der initail-Skala zu 1.0. Wenn ich entfernen, die gesamte meta-Zeile bekomme ich Zoomen, aber die Seite sieht ein wenig kleiner, wenn ich die meta-Zeile mit width=device-width zoom ist deaktiviert. Ich Teste auf iPad2. Was mache ich falsch?

    InformationsquelleAutor Ben

Schreibe einen Kommentar