Wenn ich meine App im Hochformat starte, funktioniert sie einwandfrei. Dann drehe ich mich in die Landschaft und sie wird vergrößert. Um es für den Querformatmodus richtig zu skalieren, muss ich zweimal zweimal auf etwas tippen, zuerst ganz hineinzoomen (normales Doppelklickverhalten) und dann ganz herauszoomen (wieder normales Doppelklickverhalten) . Wenn es herauszoomt, wird es auf die richtige NEUE Skala für den Querformatmodus herausgezoomt.
Das Zurückschalten zum Porträt scheint konsequenter zu funktionieren. Das heißt, der Zoom wird so gesteuert, dass die Skalierung korrekt ist, wenn die Ausrichtung wieder auf Hochformat geändert wird.
Ich versuche herauszufinden, ob dies ein Fehler ist. oder ob dies mit JavaScript behoben werden kann?
Mit dem Meta-Inhalt des Ansichtsfensters setze ich die anfängliche Skalierung auf 1,0 und ich stelle NICHT die minimale oder maximale Skalierung ein (und möchte auch nicht). Ich stelle die Breite auf Gerätebreite ein.
Irgendwelche Ideen? Ich weiß, dass viele Menschen dankbar wären, eine Lösung zu haben, da dies ein anhaltendes Problem zu sein scheint.
quelle
Antworten:
Jeremy Keith ( @adactio ) hat in seinem Blog Orientation and Scale eine gute Lösung dafür
Halten Sie das Markup skalierbar, indem Sie im Markup keine maximale Skalierung festlegen.
Deaktivieren Sie dann die Skalierbarkeit mit Javascript beim Laden bis zum Start der Geste, wenn Sie die Skalierbarkeit mit diesem Skript wieder zulassen:
Update 22-12-2014:
Auf einem iPad 1 funktioniert dies nicht, es schlägt im Eventlistener fehl. Ich habe festgestellt, dass das Entfernen folgende
.body
Korrekturen bewirkt:quelle
maximum-scale=1.0
nach dem Start der Geste in Kraft bleibt. Gibt es eine Möglichkeit, dies zu beheben?Scott Jehl hat eine fantastische Lösung gefunden, die den Beschleunigungsmesser verwendet, um Orientierungsänderungen zu antizipieren. Diese Lösung reagiert sehr schnell und beeinträchtigt Zoomgesten nicht.
https://github.com/scottjehl/iOS-Orientationchange-Fix
Minimierte Quelle:
quelle
Ich hatte das gleiche Problem und das Einstellen der Maximalskala = 1,0 hat bei mir funktioniert.
Bearbeiten: Wie in den Kommentaren erwähnt, wird der Benutzerzoom dadurch deaktiviert, außer wenn der Inhalt die Breitenauflösung überschreitet. Wie bereits erwähnt, ist dies möglicherweise nicht sinnvoll. In einigen Fällen kann dies auch erwünscht sein.
Der Ansichtsfenster-Code:
quelle
Wenn Sie die Breite im Ansichtsfenster festgelegt haben:
Und dann ändern Sie die Ausrichtung, die manchmal zufällig vergrößert wird (insbesondere wenn Sie auf dem Bildschirm ziehen), um dies zu beheben. Legen Sie hier keine Breite fest, die ich verwendet habe:
Dies behebt den Zoom, egal was passiert, dann können Sie entweder das window.onorientationchange-Ereignis verwenden oder, wenn Sie möchten, dass es plattformunabhängig ist (praktisch zum Testen), die window.innerWidth- Methode.
quelle
MobileSafari unterstützt das
orientationchange
Ereignis für daswindow
Objekt. Leider scheint es keine Möglichkeit zu geben, den Zoom direkt über JavaScript zu steuern. Vielleicht könnten Sie dasmeta
Tag, das das Ansichtsfenster steuert, dynamisch schreiben / ändern - aber ich bezweifle, dass dies funktionieren würde, es wirkt sich nur auf den Anfangszustand der Seite aus. Vielleicht können Sie dieses Ereignis verwenden, um die Größe Ihres Inhalts mithilfe von CSS zu ändern. Viel Glück!quelle
Ich habe eine funktionierende Demo eines Quer- / Hochformat-Layouts erstellt, aber der Zoom muss deaktiviert sein, damit er ohne JavaScript funktioniert:
http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes
quelle
Ich habe diese Funktion in meinem Projekt verwendet.
Also einfach addEventListener:
quelle
Ich habe eine neue Problemumgehung gefunden, die sich von allen anderen unterscheidet, die ich gesehen habe, indem ich den nativen iOS-Zoom deaktiviert und stattdessen die Zoomfunktion in JavaScript implementiert habe.
Ein hervorragender Hintergrund zu den verschiedenen anderen Lösungen für das Zoom- / Orientierungsproblem ist Sérgio Lopes: Eine Lösung für den berühmten iOS-Zoomfehler bei der Änderung der Ausrichtung zum Hochformat .
Es könnte verbessert werden, aber für meine Bedürfnisse vermeidet es die Hauptnachteile, die bei allen anderen Lösungen auftreten, die ich gesehen habe. Bisher habe ich es nur mit Mobile Safari auf einem iPad 2 mit iOS4 getestet.
Focus () / blur () ist eine Problemumgehung, um zu verhindern, dass die Zoomfunktion gelegentlich blockiert wird, nachdem die Ausrichtung geändert und einige Male gezoomt wurde.
Durch das Festlegen von document.body.style wird ein Repaint im Vollbildmodus erzwungen, wodurch gelegentliche zeitweise auftretende Probleme vermieden werden, bei denen das Repaint nach dem Zoomen schwer fehlschlägt.
quelle
Elisabeth Sie können den Inhalt des Ansichtsfensters dynamisch ändern, indem Sie dem Metatag die Eigenschaft "id" hinzufügen:
Dann können Sie einfach per Javascript anrufen:
quelle
Hier ist eine andere Möglichkeit, die gut zu funktionieren scheint.
Stellen Sie das Meta-Tag so ein, dass das Ansichtsfenster auf scale = 1 beschränkt wird, wodurch das Zoomen verhindert wird:
<meta name = "viewport" content = "width = Gerätebreite, Anfangsskala = 1, Minimalskala = 1, Maximalskala = 1">
Ändern Sie mit Javascript das Meta-Tag eine halbe Sekunde später, um das Zoomen zu ermöglichen:
setTimeout (function () {document.querySelector ("meta [name = viewport]"). setAttribute ('content', 'width = Gerätebreite, initial-scale = 1');}, 500);
Laden Sie die Seite bei einer Änderung der Ausrichtung erneut mit Javascript neu:
window.onorientationchange = function () {window.location.reload ();};
Jedes Mal, wenn Sie das Gerät neu ausrichten, wird die Seite zunächst ohne Zoom neu geladen. Aber eine halbe Sekunde später wird die Fähigkeit zum Zoomen wiederhergestellt.
quelle
Es wurde ein sehr einfach zu implementierendes Update gefunden. Setzen Sie den Fokus beim Ausfüllen des Formulars auf ein Textelement mit einer Schriftgröße von 50 Pixel. Es scheint nicht zu funktionieren, wenn das Textelement ausgeblendet ist. Das Ausblenden dieses Elements erfolgt jedoch einfach, indem die Farbeigenschaften der Elemente so eingestellt werden, dass sie keine Deckkraft aufweisen.
quelle