menonaktifkan viewport zooming iOS 10+ safari?

Saya sudah memperbarui iPhone 6 plus untuk iOS versi 10 beta dan hanya menemukan bahwa di safari mobile, Anda dapat memperbesar halaman web apapun dengan menekan ganda atau pinching ABAIKAN yang user-scalable=nokode dalam meta tag. Saya tidak tahu apakah itu bug atau fitur. Jika itu dianggap sebagai fitur, bagaimana cara menonaktifkan safari viewport zooming iOS 10?

diperbaharui di iOS 11/12 rilis, iOS 11 dan iOS 12 safari masih JANGAN TIDAK menghormati user-scalable=nometa tag.

Mungkin untuk mencegah penskalaan halaman web di safari di iOS 10, tetapi itu akan melibatkan lebih banyak pekerjaan di pihak Anda. Saya kira argumennya adalah bahwa tingkat kesulitan harus menghentikan devs kargo-kultus dari menjatuhkan "user-scalable = no" ke dalam setiap tag viewport dan membuat hal-hal sulit bagi pengguna yang mengalami gangguan penglihatan.

Namun, saya ingin melihat Apple mengubah implementasinya sehingga ada cara sederhana (meta-tag) untuk menonaktifkan ketuk dua kali untuk memperbesar. Sebagian besar kesulitan berhubungan dengan interaksi itu.

Anda dapat menghentikan pinch-to-zoom dengan sesuatu seperti ini:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, false);

Perhatikan bahwa jika ada target yang lebih dalam memanggil stopPropagation pada acara tersebut, acara tidak akan mencapai dokumen dan perilaku penskalaan tidak akan dicegah oleh pendengar ini.

Menonaktifkan ketukan ganda untuk memperbesar serupa. Anda menonaktifkan ketukan pada dokumen yang terjadi dalam 300 milidetik dari ketukan sebelumnya:

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

Jika Anda tidak mengatur elemen formulir Anda dengan benar, memfokuskan pada input akan memperbesar otomatis, dan karena Anda sebagian besar telah menonaktifkan zoom manual, sekarang hampir tidak mungkin untuk unzoom. Pastikan ukuran font input adalah> = 16px.

Jika Anda mencoba menyelesaikan ini di WKWebView di aplikasi asli, solusi yang diberikan di atas layak, tetapi ini adalah solusi yang lebih baik: https://stackoverflow.com/a/31943976/661418 . Dan seperti yang disebutkan dalam jawaban lain, di iOS 10 beta 6, Apple kini telah memberikan bendera untuk menghormati tag meta.

Pembaruan Mei 2017: Saya mengganti metode lama 'check touches on touchstart' untuk menonaktifkan pinch-zoom dengan pendekatan 'check event.cale on touchmove' yang lebih sederhana. Harus lebih dapat diandalkan untuk semua orang.

Ini adalah fitur baru di iOS 10.

Dari catatan rilis iOS 10 beta 1:

• Untuk meningkatkan aksesibilitas pada situs web di Safari, pengguna sekarang dapat mencubit untuk memperbesar bahkan ketika situs web diatur user-scalable=nodalam viewport.

Saya berharap kita akan segera melihat add-on JS untuk menonaktifkan ini dalam beberapa cara.

Saya sudah bisa memperbaikinya menggunakan touch-actionproperti css pada elemen individual. Coba atur touch-action: manipulation;elemen yang biasanya diklik, seperti tautan atau tombol.

Tampaknya perilaku ini seharusnya diubah dalam beta terbaru, yang pada saat penulisan adalah beta 6.

Dari catatan rilis untuk iOS 10 Beta 6:

WKWebViewsekarang default untuk menghormati user-scalable=nodari viewport. Klien dari WKWebViewdapat meningkatkan aksesibilitas dan memungkinkan pengguna untuk mencubit-to-zoom pada semua halaman dengan menyetel WKWebViewConfiguration properti ignoresViewportScaleLimitsuntuk YES.

Namun, dalam pengujian (sangat terbatas) saya, saya belum dapat mengkonfirmasi hal ini.

Sunting: diverifikasi, iOS 10 Beta 6 menghormati user-scalable=nosecara default untuk saya.

Solusi yang bekerja di Mobile Safari saat ini penulisan, adalah memiliki argumen ketiga di addEventListenerbe { passive: false }, sehingga solusi terlihat penuh seperti ini:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

Anda mungkin ingin memeriksa apakah opsi yang didukung tetap kompatibel.

Saya menghabiskan sekitar satu jam mencari opsi javascript yang lebih kuat, dan tidak menemukannya. Kebetulan bahwa dalam beberapa hari terakhir saya telah mengutak-atik hammer.js (Hammer.js adalah perpustakaan yang memungkinkan Anda memanipulasi semua jenis acara sentuh dengan mudah) dan sebagian besar gagal pada apa yang saya coba lakukan.

Dengan peringatan itu, dan memahami saya sama sekali bukan ahli javascript, ini adalah solusi yang saya buat dengan yang pada dasarnya memanfaatkan hammer.js untuk menangkap peristiwa pinch-zoom dan double-tap dan kemudian login dan buang.

Pastikan Anda memasukkan hammer.js di halaman Anda dan kemudian coba tempelkan javascript ini di kepala di suatu tempat:

< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >

  // SPORK - block pinch-zoom to force use of tooltip zoom
  $(document).ready(function() {

    // the element you want to attach to, probably a wrapper for the page
    var myElement = document.getElementById('yourwrapperelement');
    // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
    var hammertime = new Hammer(myElement, {
      prevent_default: false,
      touchAction: "pan"
    });

    // pinch is not enabled by default in hammer
    hammertime.get('pinch').set({
      enable: true
    });

    // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
    hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
      console.log('captured event:', e.type);
      e.preventDefault();
    })
  });
</script>

Saya mencoba jawaban sebelumnya tentang pinch-to-zoom

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

namun terkadang layar masih diperbesar ketika acara.touches.length> 1 Saya menemukan cara terbaik adalah menggunakan acara touchmove, untuk menghindari jari bergerak di layar. Kode akan menjadi seperti ini:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

Semoga ini bisa membantu.

Periksa faktor skala dalam acara sentuh lalu hindari acara sentuh.

document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
        event.preventDefault();
    }
}, false);

Kita bisa mendapatkan semua yang kita inginkan dengan menyuntikkan satu aturan gaya dan dengan mencegat acara zoom:

$(function () {
  if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
  $(document.head).append(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

✔ Menonaktifkan pinch zoom.

✔ Nonaktifkan zoom ketuk dua kali.

✔ Gulir tidak terpengaruh.

✔ Nonaktifkan sorotan ketuk (yang dipicu, di iOS, oleh aturan gaya).

PEMBERITAHUAN: Tweak deteksi iOS sesuai keinginan Anda. Lebih lanjut tentang itu di sini .

Permintaan maaf kepada lukejackson dan Piotr Kowalski , yang jawabannya muncul dalam bentuk yang diubah dalam kode di atas.

Saya datang dengan solusi yang cukup naif, tetapi tampaknya berhasil. Tujuan saya adalah untuk mencegah ketukan ganda yang tidak disengaja diartikan sebagai zoom in, sembari menjaga pinch to zoom berfungsi untuk aksesibilitas.

Idenya adalah dalam mengukur waktu antara yang pertama touchstartdan kedua touchenddalam satu ketukan ganda dan kemudian mengartikan yang terakhir touchendsebagai klik jika jeda terlalu kecil. Meskipun mencegah pembesaran yang tidak disengaja, metode ini tampaknya membuat daftar bergulir tidak terpengaruh, ini bagus. Tidak yakin apakah saya belum melewatkan apa pun.

let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;

document.addEventListener('touchstart', () => {
  preLastTouchStartAt = lastTouchStartAt;
  lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
  const touchEndAt = +new Date();
  if (touchEndAt - preLastTouchStartAt < delay) {
    event.preventDefault();
    event.target.click();
  }
});

Terinspirasi oleh intisari dari mutewinter dan jawaban Joseph .

Dalam kasus khusus saya, saya menggunakan Babylon.js untuk membuat adegan 3D dan seluruh halaman saya terdiri dari satu kanvas layar penuh. Mesin 3D memiliki fungsi zoom sendiri tetapi pada iOS pinch-to-zoom mengganggu itu. Saya memperbarui jawaban @Joseph untuk mengatasi masalah saya. Untuk menonaktifkannya, saya menemukan bahwa saya perlu melewatkan {pasif: false} sebagai opsi untuk pendengar acara. Kode berikut ini berfungsi untuk saya:

window.addEventListener(
    "touchmove",
    function(event) {
        if (event.scale !== 1) {
            event.preventDefault();
        }
    },
    { passive: false }
);

Walaupun kedengarannya aneh, setidaknya untuk Safari di iOS 10.2, ketuk dua kali untuk memperbesar secara ajaib dinonaktifkan jika elemen Anda atau leluhurnya memiliki salah satu dari yang berikut:

1. Pendengar onClick - itu bisa menjadi noop sederhana.
2. Satu cursor: pointerset dalam CSS

Zoom tidak disengaja cenderung terjadi ketika:

• Seorang pengguna mengetuk komponen dari antarmuka
• Seorang pengguna berinteraksi dengan viewport menggunakan dua digit atau lebih (cubit)

Untuk mencegah perilaku ketuk ganda, saya menemukan dua solusi yang sangat sederhana:

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

Kedua hal ini mencegah Safari (iOS 10.3.2) tidak memperbesar tombol. Seperti yang Anda lihat satu hanya JavaScript, yang lain hanya CSS. Gunakan dengan tepat.

Berikut ini adalah demo: https://codepen.io/lukejacksonn/pen/QMELXQ

Saya belum mencoba untuk mencegah perilaku cubitan (belum), terutama karena saya cenderung tidak membuat antarmuka multi-sentuh untuk web dan kedua saya telah datang ke gagasan bahwa mungkin semua antarmuka termasuk UI aplikasi asli harus "cubit untuk memperbesar" -dapat di tempat. Saya masih merancang untuk menghindari pengguna harus melakukan ini untuk membuat UI Anda dapat diakses oleh mereka, dengan cara apa pun.

Menemukan pekerjaan sederhana ini yang tampaknya mencegah klik dua kali untuk memperbesar:

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);

Seperti yang diminta, saya telah mentransfer komentar saya ke sebuah jawaban sehingga orang dapat membatalkannya:

Ini berfungsi 90% dari waktu untuk iOS 13:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

dan

<meta name="HandheldFriendly" content="true">

Saya memeriksa semua jawaban di atas dalam praktek dengan halaman saya di iOS (iPhone 6, iOS 10.0.2), tetapi tidak berhasil. Ini solusi kerja saya:

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});

ini bekerja untuk saya:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);