Bagaimana Anda menonaktifkan zoom viewport di Mobile Safari?


393

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


6
Jika Anda membuat game, maka mengendalikan zoom mungkin valid. Namun dalam hampir semua kasus lain, ini harus sangat tidak dianjurkan. Sayangnya itu sudah menjadi praktik standar bagi banyak pengembang ponsel. Jika pengguna ingin memperbesar agar dapat membaca teks dengan lebih mudah, dll. Mencegah mereka melakukannya tidak terlalu bagus.
user2268788

72
Kami menonaktifkan zoom pada aplikasi berbasis web seluler. Anda tidak dapat memperbesar aplikasi Native iOS dan itu tidak diperlukan di aplikasi web kami. Jika situs atau aplikasi Anda dioptimalkan untuk seluler, maka pengguna Anda tidak perlu melakukan zoom. Selalu ada kasing yang digunakan untuk menonaktifkan zoom. Tidak harus selalu dengan satu atau lain cara.
Bradley Flood

10
Ya saya tidak mengikuti garis logika bahwa menonaktifkan zoom pada situs yang dioptimalkan untuk seluler adalah hal yang buruk . Yang jauh lebih buruk adalah memiliki viewport yang tidak sengaja menjelajah karena layar mengambil input pan yang tidak disengaja dan memperbesar pada situs yang tidak mengharuskan Anda untuk memperbesar pula. Secara realistis jika pengguna Anda perlu memperbesar konten di situs yang dioptimalkan untuk seluler Anda maka masalahnya adalah desain, bukan kurangnya zoom.
Nathan Hornby

3
@NathanHornby: Masalah penonaktifan zoom adalah kurangnya rasa hormat terhadap preferensi pengguna. Pengguna yang berbeda lebih menyukai ukuran teks yang berbeda, pemirsa yang lebih muda dengan penglihatan yang baik mungkin lebih suka melihat lebih banyak konten, sementara pemirsa dengan penglihatan yang buruk tidak dapat menggunakan apa pun yang tidak memiliki teks raksasa. Orang lain memiliki Parkinson tetapi masih memiliki penglihatan yang baik, sehingga mereka lebih suka tombol ekstra besar tetapi tidak mendapat manfaat dari teks besar secara umum.
Lie Ryan

4
@NathanHornby Bukan berarti perancang telah melakukan sesuatu yang salah. Artinya pengguna, untuk alasan apa pun, ingin memperbesar. Pinch-zoom adalah fitur standar dari semua ponsel layar sentuh. Setiap pengguna yang memiliki telepon seperti itu, tahu cara menggunakannya. Saya tahu ini adalah pertanyaan lama, tetapi saya masih terus-menerus frustrasi oleh semua pengembang yang bersikeras melanggar fungsionalitas ponsel saya karena mereka pikir itu membuat desain mereka terlihat lebih baik.
user1751825

Jawaban:


718

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" />

12
itu adalah kutipan mewah, saya telah menyalin tag dari situs web tanpa memperhatikan, terima kasih telah menunjukkan itu!
MetaGuru

5
Mungkin ini pada akhirnya, tetapi mungkin perlu menunjukkan bahwa ini perlu diterapkan pada halaman "tingkat atas". Jika Anda menerapkan tag meta ini ke iframe, itu tidak akan berfungsi kecuali jika tag meta juga diterapkan ke halaman paling atas.
founddrama

2
Mengapa ada orang yang pernah membuat perangkat lunak yang menciptakan penawaran mewah?
Traubenfuchs

3
@Traubenfuchs: Tipografi.
BoltClock

3
Ini adalah jawaban yang agak lama dan datang ke masalah yang saya baca bahwa jika Anda mengatur user-scalable ke no ini akan menyebabkan masalah aksesibilitas. Pada iOS 10 berfungsi dengan baik, memungkinkan pengguna untuk memperbesar jika diinginkan, tetapi tidak memperbesar kotak input sebaliknya. Tidak perlu mengatur ukuran font yang besar juga.
David

161

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.


6
Keputusan yang mengerikan dari Apple. Menggunakan pemintal dengan tombol "-" dan "+" untuk mengurangi / menambah angka sekarang berkali-kali memperbesar atau memperkecil halaman pada iOS Safari. Pers sedang ditafsirkan sebagai ketuk dua kali untuk memperbesar, tanpa cara untuk menonaktifkannya. iOS Chrome bekerja dengan sempurna. Membuat frustrasi.
Paul

5
Meskipun saya mengacaukan keputusan itu, tetapi saya benar-benar bahagia dari apel sebagai pengguna karena saya ingin memaksakan fitur ini di banyak situs web yang menggunakan elemen kecil di dalamnya.
Bishoy Hanna

10
dunia akan ke neraka
pria kecil mungil

2
Ya ampun, siapa yang akan menebak? Pilihan konyol lain yang dibuat oleh Apple
Emil Pedersen

3
Serahkan pada Apple untuk memaksakan "fitur" aksesibilitas pada semua orang alih-alih hanya menambahkan opsi untuk itu dalam pengaturan Aksesibilitas ...
Lennholm

98

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

8
Di iOS 10, saya menemukan bahwa ini berhasil, tetapi jika Anda menggulir halaman dan kemudian mencubit-zoom saat masih menggulir, itu memungkinkan zoom. Kemudian Anda menemukan diri Anda terjebak pada level zoom baru sampai Anda menggulir lagi. Jadi ini tidak terlihat seperti solusi yang baik kecuali jika tubuh halaman Anda tidak dapat digulir. :(
Rand Scullard

1
Satu peringatan: pengguna masih dapat mengetuk dua kali layar yang akan / dapat diperbesar dan tidak tertangkap oleh ini.
Stephen

1
Masih terkadang memungkinkan zoom dengan mengetuk layar dua kali. :(
Jarzka

4
Apa yang setara dengan "ketuk ganda" gesturestart? dblklik ?
lowtechsun

3
Catatan lain, jika Anda ingin menonaktifkan aspek pembesaran dua ketuk. Mobile Safari juga mendukung 'aksi sentuh: manipulasi' (berada di bawah 'dukungan dasar', yang menonaktifkan acara ketuk ganda. Dokumentasi di sini: developer.mozilla.org/en-US/docs/Web/CSS/touch-action
jeremypress

15

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

3
Seharusnyaevent.scale !== 1
aleclarson

@aleclarson event.scale> 1 termasuk kondisi event.scale! == 1
Arthur Tsidkilov

@aleclarson untuk mencegah zoom pada Mobile Safari sudah cukup, saya menulis bahwa saya tidak suka cara ini, biasanya untuk itu harus digunakan viewport, tetapi pada iOS iphone 6 dan lebih tinggi tidak berfungsi (saya pikir event.scale Anda ! == 1 seharusnya lebih benar, tetapi semua ini tidak benar, ini semacam peretasan)
Arthur Tsidkilov

@aleclarson Sepertinya menggunakan! == memecah browser asli di Android 4.4; event.scale tidak terdefinisi.
James Pizzurro

3
@ JamesPizzurro Ya, Anda bisa menggunakanevent.scale !== undefined && event.scale !== 1
aleclarson

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


Nyebelin sekali ... Tahu kenapa mereka menghapus ini?
Stephen Tetreault

3
@smt mereka tidak ingin pengalaman web bersaing dengan pengalaman aplikasi di app store.
Marvin Danig

2
@marvindanig ya ... karena mereka mengambil biaya $ 99 untuk menghasilkan aplikasi yang bisa dengan mudah membuat aplikasi halaman web yang lebih mudah diakses untuk semua platform. Juga dari Apple tidak bisa menyukai "pengalaman web", jika itu berarti pengguna + pengembang dapat menghindari taman bertembok. Semuanya tentang kekuatan dan uang Apple :(
humanityANDpeace

Sebenarnya ini memungkinkan untuk bekerja pada versi iOS yang lebih baru. Lihat jawaban saya: stackoverflow.com/a/62165035
Feross

7

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
}

Tidak berfungsi pada versi iOS yang lebih baru
Feross

7

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.


Tidak berfungsi di iOS 12.3.1 saya, di sini ada tautan tes: https://output.jsbin.com/liqiraj
Jess

4

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


iOS 13 mengubah false menjadi {pasif: false}
wayofthefuture

4

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


Tidak berfungsi pada versi iOS yang lebih baru
Feross

3

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" />

Tidak berfungsi pada versi iOS yang lebih baru
Feross

2

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

Tidak berfungsi pada versi iOS yang lebih baru
Feross

0

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>

0

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

-3

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


13
Ini bukan jawaban .. dan banyak klien belum meminta untuk memblokir zoom .. jadi saya tidak dapat menganggap ini sebagai aturan umum

9
Zoom aksesibilitas bukan tanggung jawab halaman (bukan aplikasi apa pun). Merupakan tanggung jawab sistem operasi untuk menyediakan alat pembesaran yang dapat diakses. Setiap OS saat ini menyediakan fitur seperti itu, yang berlaku sebagai zoom layar , dan tidak boleh mengganggu zoom halaman itu sendiri, karena ini tidak dimaksudkan untuk aksesibilitas.
Bruno Finger

4
Selalu ada kasus penggunaan yang valid untuk hal-hal seperti ini. Untuk beberapa alasan, hampir semua literatur web tampaknya menganggap bahwa web hanya untuk membuat blog. Sama seperti ada kasus penggunaan yang valid untuk JavaScript eval(), demikian juga untuk menonaktifkan zoom. Saya menggunakannya untuk aplikasi web yang digunakan dalam kombinasi dengan pemindai Bluetooth, untuk mencegah pembesaran halaman saat barcode dipindai.
user128216

3
Saya sepenuhnya setuju dengan tujuan rekomendasi aksesibilitas, tetapi tidak ada pertanyaan bahwa ada waktu di mana zoom tidak diinginkan atau diperlukan, atau bahkan dapat merusak pengalaman pengguna. Plus, Anda tahu, klien.
Chuck Le Butt

2
Saya akan mengatakan bahwa dalam aplikasi html / javascript, pedoman tersebut tidak berlaku. Lagipula, akankah aplikasi asli membiarkan Anda memperbesar dan memperkecil?
Jörgen Sigvardsson

-5

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">
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.