Bagaimana Anda menonaktifkan zoom viewport di Mobile Safari?

Saya sudah mencoba ketiganya tetapi tidak berhasil:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

masing-masing adalah nilai yang berbeda yang saya temukan yang direkomendasikan oleh pencarian google atau pencarian SO, tetapi tidak ada nilai ' user-scalable = X ' yang tampaknya berfungsi

Saya juga mencoba koma membatasi nilai alih-alih titik koma, tidak berhasil. Kemudian saya mencoba HANYA memiliki user-scalablenilai sekarang, masih belum berhasil.

MEMPERBARUI

Dapatkan ini dari situs Apple dan berfungsi:

<meta name="viewport" content="width=device-width, user-scalable=no" />

ternyata masalahnya adalah kutipan non-standar karena saya telah menyalin meta tag dari situs web yang menggunakannya, wah

Kode Anda menampilkan tanda kutip ganda atribut sebagai tanda kutip ganda mewah. Jika kutipan mewah hadir dalam kode sumber Anda yang sebenarnya, saya kira itulah masalahnya.

Ini berfungsi untuk saya di Mobile Safari di iOS 4.2.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Bagi orang yang mencari solusi iOS 10, user-scaleable=nodinonaktifkan di Safari untuk iOS 10. Alasannya adalah Apple berusaha meningkatkan aksesibilitas dengan memungkinkan orang memperbesar halaman web.

Dari catatan rilis :

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

Jadi sejauh yang saya mengerti, kita tidak beruntung.

@mattis benar bahwa iOS 10 Safari tidak akan memungkinkan Anda untuk menonaktifkan pinch untuk memperbesar dengan atribut yang dapat diskalakan pengguna. Namun, saya mendapatkannya untuk menonaktifkan menggunakan preventDefault pada acara 'gesturestart'. Saya hanya memverifikasi ini di Safari di iOS 10.0.2.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

untuk iPhone safari hingga iOS 10 "viewport" bukan solusi, saya tidak suka cara ini, tetapi saya telah menggunakan kode javascript ini dan itu membantu saya

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

user-scalable=0

Ini tidak lagi berfungsi di iOS 10. Apple menghapus fitur.

Tidak mungkin Anda dapat menonaktifkan situs zoom di iOS sekarang, kecuali Anda membuat aplikasi platform kotor.

Coba tambahkan yang berikut ke tag kepala Anda:

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

selain itu

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

Terakhir, baik sebagai atribut gaya atau dalam file css Anda, tambahkan teks berikut untuk Browser berbasis webkit:

html {
    -webkit-text-size-adjust: none
}

Saya dapat menggunakannya di iOS 12 dengan kode berikut:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

Dengan pernyataan if pertama, saya memastikan itu hanya akan dijalankan di lingkungan iOS (jika dijalankan di Android, scroll scroll akan rusak). Perhatikan juga passiveopsi yang disetel ke false.

Ini berfungsi dengan baik di iOS 10.3.2

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

terima kasih @arthur dan @aleclarson

Saya berhasil menghentikan perilaku ini dengan menambahkan berikut ke header HTML. Ini berfungsi pada perangkat seluler, karena browser desktop mendukung zoom ketika menggunakan roda mouse. Ini bukan masalah besar pada browser desktop tetapi penting untuk mempertimbangkan ini.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

dan aturan berikut ke stylesheet CSS

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

kadang-kadang arahan lain dalam contenttag dapat mengacaukan tebakan / heuristik terbaik Apple tentang cara tata letak halaman Anda, yang Anda butuhkan untuk menonaktifkan pinch zoom adalah.

<meta name="viewport" content="user-scalable=no" />

Di Safari 9.0 dan yang lebih tinggi, Anda dapat menggunakan tag meta viewport shrink-to-fit seperti yang ditunjukkan di bawah ini

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Saya bodoh memiliki pembungkus div yang memiliki lebar yang diukur dalam piksel. Peramban lain tampaknya cukup pintar untuk menghadapi ini. Setelah saya mengonversi lebar menjadi nilai persentase, itu berfungsi dengan baik di ponsel Safari juga. Sangat menyebalkan.

.page{width: 960px;}

untuk

.page{width:93.75%}

<div id="divPage" class="page">
</div>

Menggunakan touch-actionproperti CSS adalah solusi paling elegan. Diuji pada iOS 13.5.

Untuk menonaktifkan pinch zoom gestures dan dan ketuk dua kali untuk memperbesar:

body {
  touch-action: pan-x pan-y;
}

Jika aplikasi Anda juga tidak perlu melakukan panning , yaitu menggulir, gunakan ini:

body {
  touch-action: none;
}

Untuk mematuhi persyaratan aksesibilitas WAI WCAG 2.0 AA, Anda tidak boleh menonaktifkan pinch zoom. (WCAG 2.0: SC 1.4.4 Mengubah ukuran level teks AA). Anda dapat membaca lebih lanjut tentang ini di sini: Aksesibilitas Ponsel: Bagaimana WCAG 2.0 dan Pedoman W3C / WAI Lainnya Berlaku untuk Seluler, 2.2 Zoom / Perbesaran

Yang ini harusnya bekerja pada iphone dll.

<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">