İPhone'da bir yön değişikliğinde bir web uygulamasının ölçeğini / yakınlaştırmasını nasıl sıfırlarım?

Uygulamamı portre modunda başlattığımda sorunsuz çalışıyor. Sonra manzaraya dönüyorum ve ölçek büyütülüyor. Manzara modu için doğru şekilde ölçeklendirmek için, bir şeye iki kez iki kez dokunmam gerekiyor, önce tamamen yakınlaştırmalı (normal çift dokunma davranışı) ve tekrar tamamen uzaklaştırmalı (yine normal çift dokunma davranışı) . Uzaklaştığında, manzara modu için doğru YENİ ölçeğe uzaklaştırır.

Portreye geri dönmek daha tutarlı çalışıyor gibi görünüyor; yani, yön tekrar dikey olarak değiştiğinde ölçek doğru olacak şekilde yakınlaştırmayı yönetir.

Bunun bir hata olup olmadığını anlamaya çalışıyorum? veya bu JavaScript ile düzeltilebilecek bir şeyse?

Viewport meta içeriği ile, başlangıç ​​ölçeğini 1.0 olarak ayarlıyorum ve minimum veya maksimum ölçeği AYARLAMIYORUM (ne de yapmak istemiyorum). Genişliği cihaz genişliğine ayarlıyorum.

Herhangi bir fikir? Kalıcı bir sorun gibi göründüğü için birçok insanın bir çözüme sahip olduğu için minnettar olacağını biliyorum.

Jeremy Keith ( @adactio ) blogunda bunun için iyi bir çözüm buluyor Oryantasyon ve ölçek

İşaretlemede maksimum ölçek ayarlamayarak İşaretlemeyi ölçeklenebilir tutun.

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

Sonra kadar yük javascript ile devre dışı ölçeklenebilirlik gesturestart bu komut ile ölçeklenebilirlik tekrar elverdiği:

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

Güncelleme 22-12-2014:
Bir iPad 1'de bu çalışmıyor, olay dinleyicide başarısız oluyor. Şu .bodydüzeltmeleri kaldırmayı buldum :

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

Scott Jehl , yön değişikliklerini tahmin etmek için ivmeölçeri kullanan harika bir çözüm buldu. Bu çözüm çok duyarlıdır ve yakınlaştırma hareketlerini engellemez.

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

Nasıl çalışır: Bu düzeltme, bir yön değişikliğinin ne zaman gerçekleşeceğini tahmin etmek için cihazın ivmeölçerini dinleyerek çalışır. Bir yönelim değişikliğinin yakın olduğunu düşündüğünde, komut dosyası kullanıcının yakınlaştırmasını devre dışı bırakır ve yakınlaştırma devre dışı bırakılarak yön değişikliğinin düzgün bir şekilde gerçekleşmesine izin verir. Komut, aygıt ya dik konuma yaklaştığında ya da yönü değiştikten sonra yakınlaştırmayı yeniden geri yükler. Bu şekilde, sayfa kullanımdayken kullanıcı yakınlaştırma asla devre dışı bırakılmaz.

Küçültülmüş kaynak:

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

Aynı sorunu yaşadım ve maksimum ölçeği = 1.0 ayarlamak benim için çalıştı.

Düzenleme: Yorumlarda belirtildiği gibi, içeriğin genişlik çözünürlüğünü aştığı durumlar dışında bu, kullanıcı yakınlaştırmasını devre dışı bırakır. Bahsedildiği gibi, bu akıllıca olmayabilir. Bazı durumlarda da istenebilir.

Görüntü alanı kodu:

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

Görünüm alanında genişliği ayarladıysanız:

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

Ve sonra yönlendirmeyi değiştirin, bazen rastgele yakınlaştırır (özellikle ekranda sürüklüyorsanız) bunu düzeltmek için burada bir genişlik ayarlamayın ben kullandım:

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

Bu, ne olursa olsun yakınlaştırmayı düzeltir, ardından window.onorientationchange olayını veya bunun platformdan bağımsız olmasını istiyorsanız (test için kullanışlıdır) window.innerWidth yöntemini kullanabilirsiniz.

MobileSafari orientationchange, windownesne üzerindeki olayı destekler . Maalesef, yakınlaştırmayı JavaScript aracılığıyla doğrudan kontrol etmenin bir yolu yok gibi görünüyor. Belki de metagörüntü alanını kontrol eden etiketi dinamik olarak yazabilir / değiştirebilirsiniz - ancak bunun işe yarayacağından şüpheliyim, yalnızca sayfanın başlangıç ​​durumunu etkiler. İçeriğinizi CSS kullanarak gerçekten yeniden boyutlandırmak için belki de bu etkinliği kullanabilirsiniz. İyi şanslar!

Manzara / portre düzeninin çalışan bir demosunu oluşturdum, ancak JavaScript olmadan çalışması için yakınlaştırmanın devre dışı bırakılması gerekiyor:

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

Projemde bu işlevi kullanıyorum.

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

yani addEventListener:

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

Yerel iOS yakınlaştırmayı devre dışı bırakarak ve bunun yerine JavaScript'te yakınlaştırma işlevini uygulayarak, gördüğüm diğerlerinden farklı yeni bir çözüm buldum.

Yakınlaştırma / yönelim sorununa yönelik diğer çeşitli çözümlerin mükemmel bir arka planı Sérgio Lopes: Dikey yön değiştirmeyle ilgili ünlü iOS yakınlaştırma hatasını düzeltme .

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

İyileştirilebilir, ancak ihtiyaçlarım için gördüğüm diğer tüm çözümlerde ortaya çıkan büyük dezavantajları ortadan kaldırır. Şimdiye kadar yalnızca iOS4 ile iPad 2'de mobil Safari kullanarak test ettim.

Focus () / blur (), yönü değiştirdikten ve birkaç kez yakınlaştırdıktan sonra yakınlaştırma işlevinin ara sıra kilitlenmesini önlemek için bir geçici çözümdür.

Document.body.style öğesinin ayarlanması, tam ekran yeniden boyamayı zorlayarak, yakınlaştırmadan sonra yeniden boyamanın kötü bir şekilde başarısız olduğu ara sıra ortaya çıkan sorunları önler.

Elisabeth, "id" özelliğini meta etikete ekleyerek görüntü alanı içeriğini dinamik olarak değiştirebilirsiniz:

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

O zaman javascript ile arayabilirsiniz:

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

İşte bunu yapmanın başka bir yolu, iyi çalışıyor gibi görünüyor.

1. Meta etiketi, görüntü alanını ölçek = 1 olarak kısıtlayacak şekilde ayarlayın, bu da yakınlaştırmayı önler:

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

2. Javascript ile, yakınlaştırmaya izin vermek için meta etiketini 1/2 saniye sonra değiştirin:

   setTimeout (function () {document.querySelector ("meta [name = viewport]"). setAttribute ('içerik', 'genişlik = cihaz genişliği, ilk ölçek = 1');}, 500);

3. Yine javascript ile yön değişikliğinde sayfayı yeniden yükleyin:

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

Cihazın yönünü her değiştirdiğinizde, sayfa başlangıçta yakınlaştırmadan yeniden yüklenir. Ancak 1/2 saniye sonra, yakınlaştırma yeteneği geri yüklenir.

Çok kolay uygulanan bir düzeltme buldum. Odağı, formun tamamlanmasının ardından yazı tipi boyutu 50 piksel olan bir metin öğesine ayarlayın. Metin öğesi gizliyse işe yaramıyor gibi görünüyor, ancak bu öğeyi gizlemek, öğelerin renk özelliklerinin opaklığı olmayacak şekilde ayarlanmasıyla kolayca yapılabilir.