Bagaimana cara mengatur ulang skala / zoom aplikasi web pada perubahan orientasi di iPhone?

Question 1

Saat saya memulai aplikasi saya dalam mode potret, itu berfungsi dengan baik. Lalu saya putar ke lanskap dan diskalakan. Untuk membuatnya berskala dengan benar untuk mode lansekap saya harus mengetuk dua kali pada sesuatu dua kali, pertama untuk memperbesar sepenuhnya (perilaku ketuk ganda normal) dan sekali lagi untuk memperbesar sepenuhnya (sekali lagi, perilaku ketuk ganda normal) . Saat zoom out, zoom out ke skala BARU yang benar untuk mode lanskap.

Beralih kembali ke potret tampaknya bekerja lebih konsisten; yaitu, menangani zoom sehingga skalanya benar saat orientasi berubah kembali ke potret.

Saya mencoba mencari tahu apakah ini bug? atau apakah ini sesuatu yang bisa diperbaiki dengan JavaScript?

Dengan konten meta viewport, saya menyetel skala awal ke 1.0 dan saya TIDAK menyetel skala minimum atau maksimum (saya juga tidak mau). Saya menyetel lebar ke lebar perangkat.

Ada ide? Saya tahu banyak orang akan bersyukur memiliki solusi karena tampaknya masalah ini terus berlanjut.

Question 2

Jeremy Keith ( @adactio ) memiliki solusi yang baik untuk ini pada nya blog Orientasi dan skala

Jaga Markup skalabel dengan tidak menyetel skala maksimum dalam markup.

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

Kemudian nonaktifkan skalabilitas dengan javascript saat dimuat hingga gestur dimulai saat Anda mengizinkan skalabilitas lagi dengan skrip ini:

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

Pembaruan 22-12-2014:
Pada iPad 1 ini tidak berfungsi, gagal pada pendengar acara. Saya telah menemukan bahwa menghapus .bodyperbaikan yang:

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

Question 3

Scott Jehl menemukan solusi fantastis yang menggunakan akselerometer untuk mengantisipasi perubahan orientasi. Solusi ini sangat responsif dan tidak mengganggu gerakan zoom.

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

Cara kerjanya: Perbaikan ini bekerja dengan mendengarkan akselerometer perangkat untuk memprediksi kapan perubahan orientasi akan terjadi. Saat menganggap perubahan orientasi sudah dekat, skrip menonaktifkan pembesaran / pengecilan pengguna, memungkinkan perubahan orientasi terjadi dengan benar, dengan pembesaran dinonaktifkan. Skrip mengembalikan zoom setelah perangkat diorientasikan mendekati tegak, atau setelah orientasinya berubah. Dengan cara ini, pembesaran / pengecilan pengguna tidak pernah dinonaktifkan saat halaman sedang digunakan.

Sumber yang diperkecil:

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

Question 4

Saya memiliki masalah yang sama, dan pengaturan skala-maksimum = 1.0 berhasil untuk saya.

Edit: Seperti yang disebutkan dalam komentar, ini menonaktifkan zoom pengguna kecuali jika konten melebihi resolusi lebar. Seperti yang disebutkan, ini mungkin tidak bijaksana. Mungkin juga diinginkan dalam beberapa kasus.

Kode viewport:

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

Question 5

Jika Anda menyetel lebar di viewport:

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

Dan kemudian ubah orientasi itu kadang-kadang akan memperbesar secara acak (terutama jika Anda menyeret di layar) untuk memperbaiki ini jangan setel lebar di sini saya gunakan:

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

Ini memperbaiki zoom apa pun yang terjadi maka Anda dapat menggunakan acara window.onorientationchange atau jika Anda ingin platform independen (berguna untuk pengujian) metode window.innerWidth .

Question 6

MobileSafari mendukung orientationchangeacara di windowobjek. Sayangnya sepertinya tidak ada cara untuk mengontrol zoom secara langsung melalui JavaScript. Mungkin Anda bisa secara dinamis menulis / mengubah metatag yang mengontrol viewport - tapi saya ragu itu akan berhasil, itu hanya mempengaruhi keadaan awal halaman. Mungkin Anda dapat menggunakan acara ini untuk benar-benar mengubah ukuran konten Anda menggunakan CSS. Semoga berhasil!

Question 7

Saya membuat demo yang berfungsi dari tata letak lanskap / potret tetapi zoom harus dinonaktifkan agar berfungsi tanpa JavaScript:

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

Question 8

Saya telah menggunakan fungsi ini dalam proyek saya.

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

jadi tambahkan sajaEventListener:

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

Question 9

Saya telah menemukan solusi baru, berbeda dari yang lain yang pernah saya lihat, dengan menonaktifkan zoom iOS asli, dan sebagai gantinya menerapkan fungsi zoom di JavaScript.

Latar belakang yang sangat baik tentang berbagai solusi lain untuk masalah zoom / orientasi adalah oleh Sérgio Lopes: Perbaikan untuk bug zoom iOS yang terkenal pada perubahan orientasi ke potret .

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

Ini dapat ditingkatkan, tetapi untuk kebutuhan saya, ini menghindari kelemahan utama yang terjadi dengan semua solusi lain yang telah saya lihat. Sejauh ini saya baru mengujinya menggunakan Safari seluler di iPad 2 dengan iOS4.

Fokus () / blur () adalah solusi untuk mencegah penguncian sesekali fungsi zoom yang dapat terjadi setelah mengubah orientasi dan melakukan zoom beberapa kali.

Menyetel document.body.style memaksa pengecatan ulang layar penuh, yang menghindari masalah sesekali ketika pengecatan ulang gagal parah setelah zoom.

Question 10

Elisabeth, Anda dapat mengubah konten viewport secara dinamis dengan menambahkan properti "id" ke metatag:

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

Kemudian Anda bisa memanggil dengan javascript:

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

Question 11

Berikut cara lain untuk melakukannya, yang tampaknya berhasil dengan baik.

Setel tag meta untuk membatasi viewport ke scale = 1, yang mencegah pembesaran:

<meta name = "viewport" content = "width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1">
Dengan javascript, ubah tag meta 1/2 detik kemudian untuk memungkinkan pembesaran:

setTimeout (function () {document.querySelector ("meta [name = viewport]"). setAttribute ('content', 'width = device-width, initial-scale = 1');}, 500);
Sekali lagi dengan javascript, saat orientasi berubah, muat ulang halaman:

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

Setiap kali Anda mengubah orientasi perangkat, halaman dimuat ulang, awalnya tanpa zoom. Tapi 1/2 detik kemudian, kemampuan zoom dipulihkan.

Question 12

Menemukan perbaikan yang sangat mudah diterapkan. Setel fokus ke elemen teks yang memiliki ukuran font 50px saat formulir selesai. Tampaknya tidak berfungsi jika elemen teks disembunyikan tetapi menyembunyikan elemen ini mudah dilakukan dengan menyetel properti warna elemen agar tidak memiliki opasitas.