Wie setze ich den Maßstab / Zoom einer Web-App bei einer Orientierungsänderung auf dem iPhone zurück?

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.

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.

<meta name="viewport" content="width=device-width, initial-scale=1">

Deaktivieren Sie dann die Skalierbarkeit mit Javascript beim Laden bis zum Start der Geste, wenn Sie die Skalierbarkeit mit diesem Skript wieder zulassen:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

Update 22-12-2014:
Auf einem iPad 1 funktioniert dies nicht, es schlägt im Eventlistener fehl. Ich habe festgestellt, dass das Entfernen folgende .bodyKorrekturen bewirkt:

document.addEventListener('gesturestart', function() { /* */ });

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

So funktioniert es: Bei diesem Fix wird der Beschleunigungsmesser des Geräts abgehört, um vorherzusagen, wann eine Orientierungsänderung bevorsteht. Wenn eine Orientierungsänderung unmittelbar bevorsteht, deaktiviert das Skript das Zoomen des Benutzers, sodass die Orientierungsänderung bei deaktiviertem Zoomen ordnungsgemäß durchgeführt werden kann. Das Skript stellt den Zoom wieder her, sobald das Gerät entweder fast aufrecht ausgerichtet ist oder nachdem sich seine Ausrichtung geändert hat. Auf diese Weise wird das Zoomen von Benutzern niemals deaktiviert, während die Seite verwendet wird.

Minimierte Quelle:

/*! 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);

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:

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

Wenn Sie die Breite im Ansichtsfenster festgelegt haben:

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

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:

<meta id="viewport" name="viewport" content="initial-scale=1.0; user-scalable=0;
minimum-scale=1.0; maximum-scale=1.0" />

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.

MobileSafari unterstützt das orientationchangeEreignis für das windowObjekt. Leider scheint es keine Möglichkeit zu geben, den Zoom direkt über JavaScript zu steuern. Vielleicht könnten Sie das metaTag, 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!

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

Ich habe diese Funktion in meinem Projekt verwendet.

function changeViewPort(key, val) {
    var reg = new RegExp(key, "i"), oldval = document.querySelector('meta[name="viewport"]').content;
    var newval = reg.test(oldval) ? oldval.split(/,\s*/).map(function(v){ return reg.test(v) ? key+"="+val : v; }).join(", ") : oldval+= ", "+key+"="+val ;
    document.querySelector('meta[name="viewport"]').content = newval;
}

Also einfach addEventListener:

if( /iPad|iPhone|iPod|Android/i.test(navigator.userAgent) ){
    window.addEventListener("orientationchange", function() { 
        changeViewPort("maximum-scale", 1);
        changeViewPort("maximum-scale", 10);
    }
}

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 .

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" id="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
    <title>Robocat mobile Safari zoom fix</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        #container {
            -webkit-transform-origin: 0px 0px;
            -webkit-transform: scale3d(1,1,1);
            /* shrink-to-fit needed so can measure width of container http://stackoverflow.com/questions/450903/make-css-div-width-equal-to-contents */
            display: inline-block;
            *display: inline;
            *zoom: 1;
        }
        #zoomfix {
            opacity: 0;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <input id="zoomfix" disabled="1" tabIndex="-1">
    <div id="container">
        <style>
            table {
                counter-reset: row cell;
                background-image: url(http://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg);
            }
            tr {
                counter-increment: row;
            }
            td:before {
                counter-increment: cell;
                color: white;
                font-weight: bold;
                content: "row" counter(row) ".cell" counter(cell);
            }
        </style>
        <table cellspacing="10">
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
            <tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>
        </table>
    </div>

    <script>
    (function() {
        var viewportScale = 1;
        var container = document.getElementById('container');
        var scale, originX, originY, relativeOriginX, relativeOriginY, windowW, windowH, containerW, containerH, resizeTimer, activeElement;
        document.addEventListener('gesturestart', function(event) {
            scale = null;
            originX = event.pageX;
            originY = event.pageY;
            relativeOriginX = (originX - window.pageXOffset) / window.innerWidth;
            relativeOriginY = (originY - window.pageYOffset) / window.innerHeight;
            windowW = window.innerWidth;
            windowH = window.innerHeight;
            containerW = container.offsetWidth;
            containerH = container.offsetHeight;
        });
        document.addEventListener('gesturechange', function(event) {
            event.preventDefault();
            if (originX && originY && event.scale && event.pageX && event.pageY) {
                scale = event.scale;
                var newWindowW = windowW / scale;
                if (newWindowW > containerW) {
                    scale = windowW / containerW;
                }
                var newWindowH = windowH / scale;
                if (newWindowH > containerH) {
                    scale = windowH / containerH;
                }
                if (viewportScale * scale < 0.1) {
                    scale = 0.1/viewportScale;
                }
                if (viewportScale * scale > 10) {
                    scale = 10/viewportScale;
                }
                container.style.WebkitTransformOrigin = originX + 'px ' + originY + 'px';
                container.style.WebkitTransform = 'scale3d(' + scale + ',' + scale + ',1)';
            }
        });
        document.addEventListener('gestureend', function() {
            if (scale && (scale < 0.95 || scale > 1.05)) {
                viewportScale *= scale;
                scale = null;
                container.style.WebkitTransform = '';
                container.style.WebkitTransformOrigin = '';
                document.getElementById('viewport').setAttribute('content', 'user-scalable=no,initial-scale=' + viewportScale + ',minimum-scale=' + viewportScale + ',maximum-scale=' + viewportScale);
                document.body.style.WebkitTransform = 'scale3d(1,1,1)';
                // Without zoomfix focus, after changing orientation and zoom a few times, the iOS viewport scale functionality sometimes locks up (and completely stops working).
                // The reason I thought this hack would work is because showing the keyboard is the only way to affect the viewport sizing, which forces the viewport to resize (even though the keyboard doesn't actually get time to open!).
                // Also discovered another amazing side effect: if you have no meta viewport element, and focus()/blur() in gestureend, zoom is disabled!! Wow!
                var zoomfix = document.getElementById('zoomfix');
                zoomfix.disabled = false;
                zoomfix.focus();
                zoomfix.blur();
                setTimeout(function() {
                    zoomfix.disabled = true;
                    window.scrollTo(originX - relativeOriginX * window.innerWidth, originY - relativeOriginY * window.innerHeight);
                    // This forces a repaint. repaint *intermittently* fails to redraw correctly, and this fixes the problem.
                    document.body.style.WebkitTransform = '';
                }, 0);
            }
        });
    })();
    </script>
</body>
</html>

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.

Elisabeth Sie können den Inhalt des Ansichtsfensters dynamisch ändern, indem Sie dem Metatag die Eigenschaft "id" hinzufügen:

<meta name="viewport" id="view" content="user-scalable=yes, width=device-width minimum-scale=1, maximum-scale=1" />

Dann können Sie einfach per Javascript anrufen:

document.getElementById("view").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=10');

Hier ist eine andere Möglichkeit, die gut zu funktionieren scheint.

1. 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">

2. Ä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);

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

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.