iOS-viewport-Einstellungen

Baue ich ein iPad web-app. Derzeit bin ich versuchen, die Breite Seite & viewport-Einstellungen zur Optimierung der Website.

Was ich versuche zu erreichen ist die web-app den gesamten Bildschirm im quer-und hochformat ohne die Benutzer zu skalieren und ohne leere Bereiche Links und rechts der Inhalt.

Kann ich erreichen, das mit:

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

und

max-width:1024px;
min-width:768px;

Das problem dann, ist die Kodierung aller meiner css-Datei für die Variablen breiten. Ich würde wirklich lieber über ein einziges css-Breite, so dass ich es richtig kann code die Breite der Seitenelemente.

Also, wenn ich die css, um eine einzelne Breite, ich kann nicht scheinen, um die viewport-Einstellungen richtig! Wenn ich öffnen Sie die Seite im hochformat mit diesen Einstellungen:

<meta name="viewport" content="width=device-width,user-scalable=no" />

alles funktioniert einwandfrei. Wenn ich drehen Sie das Gerät ins Querformat, wieder, es ist alles gut. Kommen wir zurück zu portrait-dann ist dort habe ich die Probleme. Die Seite ist dann zu groß für den viewport! Ich will, dass es passt das Gerät Breite noch!

Es scheint, wie es sollte wirklich leicht sein! Bin ich etwas fehlt? Ich wirklich don ' T haben ein iPad (holding out for v2), so das im Test auf iOS-simulator, der kommt mit xcode – es sollte nicht einen Unterschied aber!

Habe ich mit diese.

InformationsquelleAutor | 2011-01-11
  1. 1

    Nicht sicher, ob das hilft, aber es ist ein Weg, Sie können erkennen, die rotation und Aktionen durchzuführen. Vielleicht zwingt das Rendern der Seite erneut oder überprüfen Sie die Skalierung. Aber ich habe nicht begegnet diesem problem auf dem iPad so weit, Sie haben eine Seite, die wir sehen können, zum testen auf einem Gerät?

    <body onorientationchange = "updateView();">

<script>
    function updateView()
    {
        switch (window.orientation)
        {
            case 0: //Portrait
                break;
            case 90: ; //Landscape
                break;
            case -90: ; //Landscape counterclockwise
                break;
        }
    }
</script>
    • Nur ein heads-up, ein "upside down" (home-Taste) iOS-Gerät in hochformat Berichte " 180 " meine Erfahrung ist, möchten Sie vielleicht hinzufügen, dass Fall.
    InformationsquelleAutor Peter Witham
Schreibe einen Kommentar