I've update iPhone 6 plus untuk iOS 10 versi beta dan hanya menemukan bahwa di mobile safari, anda dapat memperbesar setiap halaman web oleh ganda menekan atau mencubit ABAIKAN user-scalable=tidak ada
kode meta tag. Saya don't tahu apakah itu's bug atau fitur. Jika itu's dianggap sebagai fitur, bagaimana kita bisa menonaktifkan pandang zoom iOS 10 safari ?
diperbarui pada iOS 11/12 rilis, iOS 11 dan iOS 12 safari masih MELAKUKAN TIDAK menghormati user-scalable=no
meta tag.
It's mungkin untuk mencegah halaman web scaling di safari pada iOS 10, tapi itu's akan melibatkan lebih banyak bekerja pada bagian anda. Saya kira argumen adalah bahwa tingkat kesulitan harus berhenti cargo-kultus devs dari menjatuhkan "user-scalable=no" dalam setiap viewport tag dan membuat hal-hal yang sia-sia sulit bagi pengguna visi-gangguan.
Namun, aku ingin melihat Apple perubahan pelaksanaannya sehingga tidak sederhana (meta tag) cara untuk menonaktifkan double-tap-to-zoom. Sebagian besar kesulitan yang berhubungan dengan interaksi tersebut.
Anda dapat berhenti pinch-to-zoom dengan sesuatu seperti ini:
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, false);
Perhatikan bahwa jika ada lebih dalam target call stopPropagation pada acara tersebut, acara ini tidak akan mencapai dokumen dan skala perilaku tidak akan dicegah oleh pendengar.
Menonaktifkan double-tap-to-zoom lebih mirip. Anda menonaktifkan tekan pada dokumen yang terjadi sekitar 300 milidetik sebelum ketuk:
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
Jika anda don't mengatur unsur-unsur bentuk yang tepat, dengan fokus pada input akan auto-zoom, dan karena anda memiliki sebagian besar keluarga zoom manual, sekarang akan menjadi hampir mustahil untuk memperkecil. Pastikan masukan ukuran font >= 16px.
Jika anda're mencoba untuk memecahkan masalah ini dalam WKWebView dalam aplikasi asli, solusi yang diberikan di atas adalah layak, tapi ini adalah solusi yang lebih baik: https://stackoverflow.com/a/31943976/661418. Dan seperti yang disebutkan dalam jawaban yang lain, di iOS 10 beta 6, Apple kini telah disediakan bendera untuk menghormati meta tag.
Update Mei 2017: saya diganti tua 'memeriksa sentuhan panjang pada touchstart' cara menonaktifkan pinch-zoom dengan lebih sederhana 'check acara.skala pada touchmove' pendekatan. Harus lebih dapat diandalkan untuk semua orang.
Ini adalah fitur baru di iOS 10.
Dari iOS 10 beta 1 catatan rilis:
- Untuk meningkatkan aksesibilitas di situs web di Safari, pengguna sekarang dapat pinch-to-zoom bahkan ketika sebuah situs web set
user-scalable=no
di viewport.
Saya berharap kami're akan melihat JS add-on untuk segera menonaktifkan ini dalam beberapa cara.
I've telah mampu memperbaiki ini menggunakan touch-action
properti css pada elemen individu. Coba setting touch-tindakan: manipulasi;
pada elemen-elemen yang sering diklik, seperti link atau tombol.
Tampak bahwa perilaku ini seharusnya diubah dalam versi beta terbaru, yang pada saat tulisan ini dibuat adalah versi beta 6.
Dari catatan rilis untuk iOS 10 Beta 6:
WKWebView
sekarang default untuk menghormatiuser-scalable=no
dari viewport. KlienWKWebView
dapat meningkatkan aksesibilitas dan memungkinkan pengguna untuk pinch-to-zoom pada semua halaman dengan menetapkanWKWebViewConfiguration
propertyignoresViewportScaleLimits
keYA
.
Namun, di saya (sangat terbatas) pengujian, saya dapat't belum mengkonfirmasi hal ini menjadi kasus.
Edit: diverifikasi, iOS 10 Beta 6 hal user-scalable=no
secara default untuk saya.
Pemecahan masalah yang bekerja di Mobile Safari pada saat ini menulis, adalah untuk memiliki argumen ketiga di addEventListener
menjadi { pasif: false }
, begitu penuh solusi terlihat seperti ini:
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
Anda mungkin ingin centang jika pilihan yang supported untuk tetap kompatibel.
Saya menghabiskan waktu sekitar satu jam mencari yang lebih kuat opsi javascript, dan tidak menemukan satu. Itu hanya terjadi bahwa dalam beberapa hari terakhir saya've telah mengutak-atik hammer.js (Hammer.js adalah perpustakaan yang memungkinkan anda memanipulasi segala macam peristiwa sentuh dengan mudah) dan sebagian besar gagal pada apa yang sedang saya coba lakukan.
Dengan kekurangan itu, dan pemahaman saya tidak berarti javascript ahli, ini adalah solusi yang saya datang dengan yang pada dasarnya memanfaatkan hammer.js untuk menangkap pinch-zoom dan double-tap peristiwa dan kemudian masuk dan membuang mereka.
Pastikan anda menyertakan hammer.js di halaman anda dan kemudian mencoba menempel 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();
})
});
Kita bisa mendapatkan semua yang kita inginkan dengan cara menyuntikkan satu gaya aturan dan dengan mencegat zoom acara:
$(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)'
}
})
})
✔ Jika anda pinch zoom.
✔ Jika anda double-tap zoom.
✔ Gulir tidak terpengaruh.
✔ Jika anda tekan sorot (yang dipicu, pada iOS, dengan gaya memerintah).
PEMBERITAHUAN: Tweak iOS-deteksi sesuai dengan keinginan anda. Lebih dari itu di sini.
Mohon maaf untuk lukejackson dan Piotr Kowalski, dan jawaban muncul dalam bentuk yang dimodifikasi dalam kode di atas.
Aku mencoba jawaban sebelumnya tentang pinch-to-zoom
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
namun kadang-kadang layar masih zoom ketika acara tersebut.menyentuh.panjang > 1 Saya menemukan cara terbaik adalah menggunakan touchmove acara, untuk menghindari jari yang bergerak pada layar. Kode akan menjadi sesuatu seperti ini:
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
Berharap ini akan membantu.
Aku datang dengan cukup naif solusi, tetapi tampaknya untuk bekerja. Tujuan saya adalah untuk mencegah kecelakaan double-tap untuk diartikan sebagai zoom in, sambil mencubit untuk zoom kerja untuk aksesibilitas.
Idenya adalah dalam mengukur waktu antara pertama touchstart
dan kedua touchend
di double tap dan kemudian menafsirkan terakhir touchend
klik jika penundaan yang terlalu kecil. Sementara mencegah kecelakaan zoom, metode ini tampaknya untuk menjaga daftar bergulir tidak terpengaruh, yang bagus. Tidak yakin jika saya belum't terjawab apa-apa sekalipun.
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 inti dari mutewinter dan Joseph's jawaban.
Dalam kasus tertentu, saya menggunakan Babylon.js untuk membuat adegan 3D dan seluruh halaman terdiri dari satu layar penuh kanvas. Mesin 3D sendiri zoom fungsi tetapi pada iOS pinch-to-zoom mengganggu itu. Saya diperbarui di @Joseph jawaban untuk mengatasi masalah saya. Untuk menonaktifkannya, saya tahu bahwa saya harus lulus {pasif: false} sebagai pilihan untuk acara pendengar. Berikut kode yang bekerja untuk saya:
window.addEventListener(
"touchmove",
function(event) {
if (event.scale !== 1) {
event.preventDefault();
}
},
{ passive: false }
);
Temukan pekerjaan sederhana ini sekitar yang muncul untuk mencegah double klik 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);
Tidak disengaja zoom cenderung terjadi ketika:
Untuk mencegah double tap perilaku saya telah menemukan dua sangat sederhana workarounds:
<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>
Kedua mencegah Safari (iOS 10.3.2) dari zooming di pada tombol. Seperti yang anda lihat salah satunya adalah JavaScript saja, yang lain adalah CSS saja. Gunakan dengan tepat.
Berikut ini adalah demo: https://codepen.io/lukejacksonn/pen/QMELXQ
Saya belum mencoba untuk mencegah mencubit perilaku (belum), terutama karena saya cenderung untuk tidak membuat multi touch interface untuk web dan kedua aku datang bulat untuk gagasan bahwa mungkin semua antarmuka termasuk native app UI harus "pinch to zoom"-dapat di tempat. I'd masih desain untuk menghindari pengguna having untuk melakukan hal ini untuk membuat anda UI dapat diakses oleh mereka, di semua biaya.
Sebagai aneh kedengarannya, setidaknya untuk Safari di iOS 10.2, double tap untuk zoom lebih elegan dinonaktifkan jika anda elemen atau salah satu dari nenek moyang memiliki salah satu dari berikut:
cursor: pointer
set di CSSAku memeriksa semua jawaban diatas dalam praktek dengan halaman saya di iOS (iPhone 6, iOS 10.0.2), tetapi tidak berhasil. Ini saya bekerja solusi:
$(window).bind('gesturestart touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
document.body.style.transform = 'scale(1)'
}
});