Jak zresetować skalę / powiększenie aplikacji internetowej przy zmianie orientacji na iPhonie?

Kiedy uruchamiam aplikację w trybie pionowym, działa dobrze. Następnie obracam się w krajobraz i jest on powiększany. Aby uzyskać poprawne skalowanie w trybie poziomym, muszę dwukrotnie dotknąć czegoś dwukrotnie, najpierw, aby przybliżyć całkowicie (normalne zachowanie podwójnego dotknięcia) i ponownie, aby powiększyć całkowicie (znowu, normalne zachowanie podwójnego dotknięcia) . Kiedy się pomniejsza, pomniejsza do prawidłowej NOWEJ skali dla trybu poziomego.

Powrót do portretu wydaje się działać bardziej konsekwentnie; to znaczy, obsługuje zoom tak, aby skala była poprawna po zmianie orientacji z powrotem na portret.

Próbuję dowiedzieć się, czy to jest błąd? lub jeśli jest to coś, co można naprawić za pomocą JavaScript?

Z treścią meta widoku ekranu ustawiam początkową skalę na 1.0 i NIE ustawiam minimalnej ani maksymalnej skali (ani nie chcę). Ustawiam szerokość na szerokość urządzenia.

Jakieś pomysły? Wiem, że wiele osób byłoby wdzięcznych za rozwiązanie, ponieważ wydaje się, że jest to trwały problem.

Jeremy Keith ( @adactio ) ma na to dobre rozwiązanie na swoim blogu Orientation and scale

Zachowaj skalowalność znaczników, nie ustawiając maksymalnej skali w znacznikach.

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

Następnie wyłącz skalowalność za pomocą javascript podczas ładowania do momentu rozpoczęcia gestu, gdy ponownie zezwolisz na skalowalność za pomocą tego skryptu:

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);
    }
}

Aktualizacja 22-12-2014:
Na iPadzie 1 to nie działa, nie działa w przypadku nasłuchiwania. Odkryłem, że usuwanie .bodypoprawek, które:

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

Scott Jehl wymyślił fantastyczne rozwiązanie, które wykorzystuje akcelerometr do przewidywania zmian orientacji. To rozwiązanie jest bardzo responsywne i nie koliduje z gestami zoomu.

https://github.com/scottjehl/iOS-Orientationchange-Fix

Jak to działa: ta poprawka działa na podstawie nasłuchiwania akcelerometru urządzenia w celu przewidzenia, kiedy ma nastąpić zmiana orientacji. Kiedy uzna, że ​​zmiana orientacji jest nieuchronna, skrypt wyłącza powiększanie użytkownika, umożliwiając poprawną zmianę orientacji, przy wyłączonym powiększaniu. Skrypt przywraca powiększenie ponownie po ustawieniu urządzenia blisko pionu lub po zmianie jego orientacji. W ten sposób powiększanie użytkownika nigdy nie jest wyłączane, gdy strona jest używana.

Zminimalizowane źródło:

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

Miałem ten sam problem i ustawienie maksymalnej skali = 1.0 zadziałało.

Edycja: jak wspomniano w komentarzach, wyłącza to powiększanie użytkownika, z wyjątkiem sytuacji, gdy zawartość przekracza szerokość-rozdzielczość. Jak wspomniano, może to nie być mądre. W niektórych przypadkach może to być również pożądane.

Kod widoku:

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

Jeśli masz szerokość ustawioną w rzutni:

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

A potem zmień orientację, która będzie czasami losowo powiększana (zwłaszcza jeśli przeciągasz po ekranie), aby to naprawić, nie ustawiaj tutaj szerokości, której użyłem:

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

To naprawia powiększenie bez względu na to, co się stanie, wtedy możesz użyć zdarzenia window.onorientationchange lub, jeśli chcesz, aby było niezależne od platformy (przydatne do testowania), metoda window.innerWidth .

MobileSafari obsługuje orientationchangezdarzenie na windowobiekcie. Niestety wydaje się, że nie ma sposobu na bezpośrednie sterowanie powiększeniem za pomocą JavaScript. Być może mógłbyś dynamicznie pisać / zmieniać metatag, który kontroluje widok - ale wątpię, żeby to zadziałało, wpływa tylko na początkowy stan strony. Być może przydałoby się to wydarzenie, aby zmienić rozmiar treści za pomocą CSS. Powodzenia!

Stworzyłem działające demo układu poziomego / pionowego, ale powiększenie musi być wyłączone, aby działało bez JavaScript:

http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes

Używałem tej funkcji w moim projekcie.

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;
}

więc po prostu dodajEventListener:

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

Znalazłem nowe obejście, różniące się od wszystkich innych, które widziałem, wyłączając natywne powiększanie iOS i zamiast tego wdrażając funkcję powiększania w JavaScript.

Doskonałym tłem dla różnych innych rozwiązań problemu powiększenia / orientacji jest Sérgio Lopes: Poprawka słynnego błędu zoomu iOS przy zmianie orientacji na portret .

<!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>

Można go ulepszyć, ale dla moich potrzeb pozwala uniknąć poważnych wad, które występują w przypadku wszystkich innych rozwiązań, które widziałem. Do tej pory testowałem go tylko przy użyciu mobilnego Safari na iPadzie 2 z iOS4.

Ostrość () / rozmycie () to obejście zapobiegające sporadycznym blokowaniu funkcji powiększania, które może wystąpić po kilkukrotnej zmianie orientacji i powiększeniu.

Ustawienie document.body.style wymusza ponowne malowanie na pełnym ekranie, co pozwala uniknąć sporadycznych sporadycznych problemów, w których malowanie po powiększeniu nie powiedzie się.

Elisabeth, możesz dynamicznie zmieniać zawartość widocznego obszaru, dodając właściwość "id" do metatagu:

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

Następnie możesz po prostu zadzwonić przez javascript:

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

Oto inny sposób, który wydaje się działać dobrze.

1. Ustaw metatag, aby ograniczyć rzutnię do scale = 1, co zapobiega powiększaniu:

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

2. Za pomocą javascript zmień metatag 1/2 sekundy później, aby umożliwić powiększanie:

   setTimeout (function () {document.querySelector ("meta [name = viewport]"). setAttribute ('content', 'width = device-width, initial-scale = 1');}, 500);

3. Ponownie z javascriptem, przy zmianie orientacji, załaduj ponownie stronę:

   window.onorientationchange = function () {window.location.reload ();};

Za każdym razem, gdy zmieniasz orientację urządzenia, strona ładuje się ponownie, początkowo bez powiększenia. Ale 1/2 sekundy później przywracana jest możliwość powiększania.

Znalazłem bardzo łatwą do wdrożenia poprawkę. Po wypełnieniu formularza ustaw fokus na element tekstowy, którego rozmiar czcionki wynosi 50 pikseli. Wydaje się, że nie działa, jeśli element tekstowy jest ukryty, ale ukrycie tego elementu można łatwo zrobić, ustawiając właściwości koloru elementów tak, aby nie miały krycia.