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

96

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.

Elisabeth
quelle
1
Eine perfekte Lösung: Kein Javascript! stackoverflow.com/a/8727440/805787
Steeven

Antworten:

89

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() { /* */ });
Snobojohan
quelle
4
Sicher ist das besser als das Deaktivieren des Zooms?! Die beste Lösung, die ich bisher gefunden habe :)
Danielwell
Hmm, dies deaktiviert immer noch die Fähigkeit zu zoomen. Hat jemand eine einfache Lösung, die dies nicht tut?
Brad Swerdfeger
Es funktioniert, aber ich habe festgestellt, dass das Problem erneut auftritt, wenn ich die Pinch-Zoom-Geste verwende und dann den Bildschirm drehe. Ich bin mir nicht sicher, wie ich das beheben soll.
Nilesh
3
Es klappt. Ich habe jedoch festgestellt, dass der Benutzer zweimal öffnen muss, um zu zoomen. Ich vermute, das liegt daran, dass das maximum-scale=1.0nach dem Start der Geste in Kraft bleibt. Gibt es eine Möglichkeit, dies zu beheben?
LandonSchropp
3
Dies funktioniert aus zwei Gründen nicht: 1) Der Gestenstart Nummer 1 wird deaktiviert, sodass der Benutzer zweimal gestikulieren muss. 2) es bricht ab, nachdem der Benutzer die erste Geste verdoppelt hat, so dass es wirklich nur funktioniert, wenn der Benutzer überhaupt keine Gesten macht. - Jeder sollte sich Andrew Ashbachers Lösung unten ansehen. Es funktioniert wirklich.
tmsimont
18

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);
Andrew Ashbacher
quelle
Nett! Sieht nach einer eleganten Lösung aus.
Elisabeth
1
Dies sollte die akzeptierte Antwort sein !!!! Ich wünschte, ich hätte dies zuerst gesehen, bevor ich eine Stunde mit den oben genannten Lösungen verschwendete :)
tmsimont
1
Nach weiteren Tests ist dies eine unzuverlässige Lösung :( Es ist inkonsistent, und nachdem ich den Code durchgesehen habe, kann ich sehen, warum ... die definierte "Bewegungsschwelle" nicht immer erreicht wird, insbesondere wenn Sie das iPad bei halten ein Winkel beim Drehen
tmsimont
Könnte schlimme Konsequenzen für jeden haben, der die Rotationssperre verwendet ... sie könnten das Telefon in einem bestimmten Winkel halten und die Fähigkeit zum Zoomen verlieren - der Benutzer hätte keine Ahnung warum
1owk3y
14

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;">
Rakaloof
quelle
Schöne Lösung. Erledigt die Seite durch Orientierungsänderungen auf einem konstanten Zoomniveau (relativ zur Breite des Geräts). Danke, dass du es geteilt hast!
Luke Stevenson
17
Der Nachteil ist, dass behinderte Benutzer Ihre Website nicht vergrößern können!
Jess Jacobs
Ich habe festgestellt, dass all diese Methoden anscheinend verhindern, dass auf Medienabfragen basierendes CSS die neue Gerätebreite ordnungsgemäß registriert (z. B. @media all und (max-width: 479px)
mheavers
2
Das Beenden des Benutzerzooms ist eine sehr schlechte Idee. siehe Andrew Ashbachers Lösung unten
tmsimont
Ich bin mir nicht sicher über das iPhone, aber auf dem iPad löst dies das Problem nicht. Es verhindert lediglich, dass der Benutzer manuell herauszoomen kann, wenn der Browser die Änderung der Ausrichtung vergrößert.
Alejo
3

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.

Psyder
quelle
1

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!

Avi Flachs
quelle
3
Vielen Dank! Ja, ich habe versucht, die Werte des Meta-Tag-Ansichtsfensters dynamisch zu ändern, aber es hat nichts getan. Mir scheint, wenn Sie in Querformat drehen, möchten Sie, dass es richtig zoomt, um den Maßstab so zu halten, dass die Seite in das Safari-Fenster passt. Es scheint mir sehr seltsam, dass dies nicht das Standardverhalten ist!
Elisabeth
1

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);
    }
}
James Yang
quelle
0

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.

Robocat
quelle
0

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');
M Penaden
quelle
@bridgestew Wenn Sie den Zoom oder das Ansichtsfenster ändern möchten, verwenden Sie die in der UI-Web-Ansicht enthaltene Unteransicht-Bildlaufansicht. Ich habe ein Beispiel-Snipet in einem anderen Thread hinzugefügt: link
M Penades
4
@ Elizabeth funktioniert es für dich? Der Zoom wird beim Umschalten im Querformat für mich nicht zurückgesetzt.
Instanz von mir
0

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.

Mark Neunauge
quelle
6
Die Beantwortung einer Frage 5 Jahre nach ihrer Beantwortung ist etwas. Leider funktioniert das Web 2015 nicht so. Sie laden die Seite NICHT neu, wenn der Benutzer sein Gerät dreht.
Pierre
0

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.

Dellsmash
quelle