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

96

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.

Elisabeth
sumber
1
Solusi sempurna: Tanpa javascript! stackoverflow.com/a/8727440/805787
Steeven

Jawaban:

89

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() { /* */ });
sombong
sumber
4
Tentunya ini lebih baik daripada menonaktifkan zoom ?! Perbaikan terbaik yang pernah saya temukan :)
danwellman
Hmm, ini masih menonaktifkan kemampuan zoom. Apakah ada yang punya solusi sederhana yang tidak melakukan ini?
Brad Swerdfeger
Ini berfungsi, namun saya mengamati bahwa masalah dimulai lagi jika saya menggunakan gerakan pinch-zoom dan kemudian memutar layar. Tidak yakin bagaimana cara memperbaikinya.
Nilesh
3
Berhasil. Namun, saya perhatikan pengguna harus mencubit terbuka dua kali untuk memperbesar. Saya menduga ini karena maximum-scale=1.0efek tetap berlaku setelah gerakan dimulai. Apakah ada cara untuk memperbaikinya?
LandonSchropp
3
Ini tidak berfungsi karena 2 alasan: 1) menonaktifkan gesturestart nomor 1, menyebabkan pengguna perlu melakukan gestur dua kali. 2) itu rusak setelah pengguna menggandakan isyarat pertama, jadi itu benar-benar hanya bekerja jika pengguna tidak pernah isyarat sama sekali. - setiap orang harus melihat solusi Andrew Ashbacher di bawah ini. Ini benar-benar berhasil.
tmsimont
18

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);
Andrew Ashbacher
sumber
Bagus! Sepertinya solusi yang elegan.
Elisabeth
1
ini harus menjadi jawaban yang diterima !!!! Saya berharap saya melihat ini terlebih dahulu sebelum membuang waktu satu jam untuk solusi di atas :)
tmsimont
1
setelah pengujian lebih lanjut ini adalah jenis solusi yang tidak dapat diandalkan :( ini tidak konsisten, dan setelah melihat-lihat kode saya dapat melihat mengapa ... "ambang" dari gerakan yang ditentukan tidak selalu tercapai, terutama jika Anda memegang ipad di sudut saat berputar
tmsimont
Bisa menimbulkan konsekuensi buruk bagi siapa saja yang menggunakan kunci rotasi ... mereka dapat memegang ponsel pada sudut tertentu dan kehilangan kemampuan untuk memperbesar - pengguna tidak akan tahu mengapa
1owk3y
14

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;">
rakaloof
sumber
Solusi bagus. Berfungsi dengan baik dengan menjaga halaman pada tingkat zoom konstan (relatif terhadap lebar perangkat) melalui perubahan orientasi. Terima kasih telah membagikannya!
Luke Stevenson
17
sisi negatifnya adalah pengguna yang cacat tidak dapat memperbesar situs Anda!
Jess Jacobs
Saya perhatikan bahwa semua metode ini tampaknya mencegah CSS berbasis kueri media dari mendaftarkan lebar perangkat baru dengan benar (mis .: @media all dan (max-width: 479px)
mheavers
2
membunuh zoom pengguna adalah ide yang sangat buruk. lihat solusi Andrew Ashbacher di bawah ini
tmsimont
Tidak yakin tentang iPhone, tetapi di iPad ini tidak menyelesaikan masalah, ini hanya mencegah pengguna untuk secara manual memperkecil ketika browser memperbesar saat orientasi berubah.
Alejo
3

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 .

psyder
sumber
1

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!

Avi Flax
sumber
3
Terima kasih! Ya, saya mencoba secara dinamis mengubah nilai area pandang tag meta dan tidak berhasil. Menurut saya, jika Anda memutar ke Lansekap, Anda ingin memperbesarnya dengan benar untuk menjaga skala sehingga halaman pas dengan jendela Safari. Tampaknya sangat aneh bagi saya bahwa ini bukanlah perilaku default!
Elisabeth
1

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

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.

robocat
sumber
0

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');
M Penades
sumber
@bridgestew jika Anda ingin mengubah zoom atau viewport secara dinamis gunakan subview scrollview yang terdapat di uiwebview. Saya menambahkan sampel snipet di utas lain: tautan
M Penades
4
@Elisabeth apakah itu bekerja untuk Anda? Itu tidak mengatur ulang zoom saat beralih dalam mode lanskap untuk saya.
contoh saya
0

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

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

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

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

Mark Lamprey
sumber
6
Menjawab pertanyaan 5 tahun setelah ditanya adalah sesuatu .. Sayangnya ini bukan cara kerja web pada tahun 2015. Anda JANGAN memuat ulang halaman saat pengguna memutar perangkatnya.
Pierre
0

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.

Dellsmash
sumber