Zurücksetzen Skala / Breite / Zoom von Safari auf dem iPhone mit JavaScript / onorientationchange

Question

Ich bin die Anzeige unterschiedliche Inhalte je nachdem, wie der Benutzer sein / ihr Telefon mit dem onorientationchange Anruf im Body-Tag hielt. Dies funktioniert gut - ich einen div verstecken, während die andere sichtbar zu machen.

Das div im Portrait-Modus sieht auf dem ersten Last groß. Ich benutze dies den richtigen Maßstab / Zoom zu bekommen:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

Auch wenn der Inhalt im Portrait-Modus lief über die Breite korrekt ist und der Benutzer kann nach unten scrollen. Das Display im Querformat ist zu perfekt. wenn der Inhalt im Landschaftsmodus erfordert jedoch den Anwender des nach unten scrollen, dann, wenn der Benutzer kehrt zum Portrait-Modus, wird der Bildschirm „gezoomt out“ sozusagen. Dies geschieht, ob der Benutzer, während im Querformat nach unten gescrollt.

Ich habe versucht, viele verschiedene Dinge zu versuchen, die Waage / Zoom / Breite des Bildschirms richtig zu machen, aber kein Glück. Gibt es eine Möglichkeit, dies zu tun?

Vielen Dank im Voraus!

Answer 1

Hier ist, was ich mit dem Zoom auf meinen Medien-Anfragen behandeln:

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

Der maximale Maßstab ist die Sache, die es für mich verkauft. Es bedeutet den Übergang von Hoch- auf Querformat auf einem iPhone ist wirklich glatt ohne Zoom Probleme auf alle ...

Answer 2

Die „Antwort“ oben akzeptiert ist nicht wirklich eine Antwort, dass disallowing auch immer jede Zoomen so schlimm ist es, einen IE Benutzer wie die Frage, auf einem anderen Browser zu wechseln. Es ist schrecklich für die Zugänglichkeit. Sie möchten Ihr Design nicht flippig Zoom Dinge zu tun, dass Apple ideal beim Umschalten Ansichtsausrichtung als hat, aber Sie deaktivierte Benutzer in den Staub verlassen. Highly nicht zu empfehlen.

Versuche Medien-Anfragen oder js Haken (screen.width, etc.) anzupassen Ihr Design automatisch auf Orientierungsänderung verwendet wird. Es ist, warum diese Attribute für uns als Entwickler ausgesetzt sind.

Answer 3

hatte ich einige Probleme mit den Zoomstufen von Quer- auf Hochformat zu ändern, wenn der Inhalt größer ist als der Darstellungsbereich war. Einstellung "Minimum-scale = 1.0", löste dies für mich.

Answer 4

Das wird nicht funktionieren, wenn Sie einen Web-App in Safari laufen, aber ich denke, es wird funktionieren, wenn Sie eine UIWebView in Ihrem eigenen App verwenden.

ich diese havent getestet, aber es ist eine einfache Möglichkeit, Ihr Javascript zu bekommen, um die Ziel-c Seite des Codes, an dem sprechen Punkt, den Sie Zugriff auf Dinge wie der Zoom der Web-Ansicht haben.

Answer 5

Ich hatte dieses Problem auch, denke ich. Versuchen Sie setzen eine „maximale-scale = 1.0“ (und vielleicht eine „Minimum-scale = 1.0“, wenn Sie das Gefühl, wie es) in Ihrem Ansichtsfenster-Tag. Dies setzt voraus, Sie nicht der Benutzer wollen, obwohl die Lage Maßstab sein (was ich nicht)

Answer 6

Unter Verwendung von Meta-Tags für das nicht funktioniert. Ich habe jede Kombination von Meta-Tags versucht und orientationchange und gesturechange Veranstaltungen möglich, habe ich versucht, Timeouts und alle Arten von fancy Javascript, dann fand ich diese: https://github.com/scottjehl/iOS-Orientationchange-Fix

über diese Frage im Zusammenhang: Wie setze ich die Waage / Zoom von einem Web-App auf einer Orientierungsänderung auf dem iPhone?

An diesem Post erzielte Andrew Ashbacher einen Link zu dem Code geschrieben von Scott Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

Das ist eine Lösung schön in einer IIFE gewickelt so müssen Sie nicht über Namen-Raum Probleme kümmern.

Einfach fallen Sie es sich in Ihrem Skript (nicht in document.ready() wenn Sie jQuery verwenden) und Viola!

Alles, was sie tut, ist, deaktivieren Zoom devicemotion Ereignisse, dass orientationchange bevorstehende anzuzeigen ist. Es ist die beste Lösung, die ich gesehen habe, weil es tatsächlich funktioniert und nicht deaktiviert Zoom.

EDIT: dieser Ansatz ist nicht immer zuverlässig, vor allem, wenn Sie das ipad in einem Winkel halten. auch, ich glaube nicht, dass dieses Ereignis gen 1 ipads

verfügbar ist

Answer 7

Sie können die user-scalable Eigenschaft im Content-Attribute gesetzt. Versuchen Sie folgendes:

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

diese Antwort :

  

Aber wenn Sie Benutzer skalierbar zuweisen = no seine Mittel Website nicht zulassen, dass es vergrößern oder verkleinern.