Bagaimana saya bisa "menonaktifkan" zoom pada halaman web seluler?

316

Saya membuat halaman web seluler yang pada dasarnya adalah bentuk besar dengan beberapa input teks.

Namun (setidaknya pada ponsel Android saya), setiap kali saya mengklik pada beberapa input, seluruh halaman diperbesar di sana, mengaburkan sisa halaman. Apakah ada perintah HTML atau CSS untuk menonaktifkan zoom semacam ini pada halaman web moble?

html css mobile Martín Fixman
sumber
3
Seperti kata Greg di atas, jika saya memasuki situs web seluler yang menonaktifkan zoom, hal pertama yang biasanya saya lakukan adalah menekan tombol kembali (kecuali itu sesuatu yang benar-benar harus saya lihat), dan saya yakin saya bukan satu-satunya . Selain itu, berbicara dari pengalaman saya, sebagian besar situs web yang menonaktifkan zoom juga menggunakan font kecil yang akibatnya membuat sulit membaca teks dan sangat tidak nyaman.
tomasz86
8
Saya setuju bahwa itu tidak boleh dinonaktifkan untuk sebagian besar situs, tetapi ada beberapa kasus penggunaan di mana Anda mungkin ingin menonaktifkan zoom bawaan - seperti game web seluler di mana Anda mungkin ingin mengganti zoom untuk melakukan sesuatu yang lain.
Luke
11
Anda tidak - Jika pengguna ingin memperbesar maka biarkan mereka melakukannya. Selain itu: Chrome memiliki opsi untuk mengabaikan permintaan Anda.
Martin
2
Untuk pengguna Android Firefox, ada Add-on Selalu Zoom untuk Firefox . Sangat dianjurkan.
Colin D Bennett
2
Dari iOS 10 , user-scalable=nodiabaikan. Lihat ini
Raptor

Jawaban:

443

Ini harus menjadi semua yang Anda butuhkan 

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>
kgutteridge
sumber
23
ini juga menonaktifkan kemampuan pengguna untuk memperbesar secara umum, serta kemampuan browser untuk secara otomatis menyesuaikan cara halaman masuk ke dalam viewport - semua yang dicari Martin adalah cara untuk menonaktifkan 'zoom-on-input-klik' tingkah laku.
matt lohkamp
3
Saat ini seseorang di Posterous melakukan hal itu, sementara memiliki font di 12px sehingga tidak dapat dibaca dan saya tidak dapat menemukan cara mengatasinya.
Emil Ivanov
41
Setiap orang tunanetra, termasuk saya, membenci ini lebih dari apa pun. Saya harus mengambil layar ambil dari halaman yang melakukan ini dan kemudian memperbesar pada mereka di penampil gambar.
Jack Marchetti
6
Apa yang dilakukan tag meta kedua? Bukankah width=device-widthsudah ada di tag meta pertama?
Luke
1
ini sepertinya tidak berfungsi di iOS 7. Lihat jawaban
lukad03
159

Bagi Anda yang terlambat menghadiri pesta, jawaban kgutteridge tidak berfungsi untuk saya dan jawaban Benny Neugebauer mencakup target-densitydpi ( fitur yang sedang tidak digunakan ).

Namun ini berhasil bagi saya: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Luke Keller
sumber
7
Ini jawaban yang benar sekarang. Jawaban yang lain tidak lagi berfungsi (setidaknya untuk iOS 7).
KyleFarris
7
Adakah yang mencoba ini di iOS 10.x Saya tidak berpikir itu berfungsi?
JMac
Tidak bekerja untuk saya. Ini mengubah ukuran semua layar dengan scrollbar dan zoom buruk.
Cocorico
1
Masih tidak berfungsi di Safari / iOS 11 karena masalah SFB di Apple.
15ee8f99-57ff-4f92-890c-b56153
52

Ada sejumlah pendekatan di sini- dan meskipun posisinya adalah bahwa biasanya pengguna tidak boleh dibatasi dalam hal memperbesar untuk tujuan aksesibilitas, mungkin ada insiden di mana diperlukan:

Render halaman di lebar perangkat, jangan skala:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mencegah penskalaan - dan mencegah pengguna untuk memperbesar:

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

Menghapus semua pembesaran, semua penskalaan

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
SW4
sumber
"biasanya pengguna tidak boleh dibatasi" tetapi ketika mengembangkan aplikasi web untuk seluler Anda sering harus berurusan dengan "zom-in pada fokus input". Saya merasa sangat membantu untuk menonaktifkan pembesaran dalam hal ini.
Le 'nton
@ Le'nton menonaktifkan zoom pada seluruh halaman bukanlah cara yang baik untuk menangani zoom in pada fokus input. Setidaknya di iOS, zoom fokus input dapat dinonaktifkan dengan meningkatkan ukuran font input.
pfg
39

Kamu bisa memakai:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

Tetapi harap dicatat bahwa dengan Android 4.4 properti target-densitydpi tidak lagi didukung . Jadi untuk Android 4.4 dan yang lebih baru disarankan sebagai praktik terbaik:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
Benny Neugebauer
sumber
35

Karena masih belum ada solusi untuk masalah awal, inilah CSS murni saya dua sen.

Peramban seluler (kebanyakan dari mereka) memerlukan input font berukuran 16px. Begitu

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}
Luaskan cuplikan

memecahkan masalah. Jadi Anda tidak perlu menonaktifkan fitur zoom dan aksesibilitas longgar di situs Anda.

Jika ukuran font dasar Anda bukan 16px atau 16px pada ponsel, Anda dapat menggunakan kueri media.

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}
Luaskan cuplikan

Azamat Rasulov
sumber
2
Mengapa solusi ini memiliki sedikit suara? Sejauh ini cara terbaik untuk menghindari zoom bentuk-klik.
KlausCPH
1
Iya; ini memecahkan masalah saya juga! Saya tidak ingin menonaktifkan zoom sepenuhnya dan ini hanya yang saya butuhkan.
brendan
1
Anda juga dapat mengatur font-size: 1remuntuk seluruh halaman, sehingga font dapat menyesuaikan dengan baik, sekaligus menghindari masalah "fokus-pada-pembesaran".
itachi
12

coba tambahkan meta-tag dan style ini 

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


<style>
body{
        touch-action: manipulation;
    }
</style>
Sarath Ak
sumber
1
seharusnya tidak touch-actiondisetel ke none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values
rahulroy9202
@ rahulroy9202 bagi saya touch-action: manipulation;bekerja dengan baik. touch-action: none;tidak melakukan apa pun
Umair
7

Sepertinya hanya menambahkan tag meta ke index.html tidak mencegah pembesaran halaman. Menambahkan gaya di bawah ini akan membuat keajaiban.

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

EDIT: Demo: https://no-mobile-zoom.stackblitz.io

Api
sumber
2
Perbaikan ini harus diterima, juga bekerja pada safari seluler ios13 atm
Magico
Ini berfungsi seperti yang diharapkan dari ponsel, terima kasih! periksa di sini proyecto26.com/animatable-component
jdnichollsc
6

Kemungkinan Solusi untuk Aplikasi Web: Walaupun zoom tidak dapat dinonaktifkan di iOS Safari lagi, zoom akan dinonaktifkan saat membuka situs dari pintasan layar beranda.

Tambahkan tag meta ini untuk menyatakan Aplikasi Anda sebagai "mampu Aplikasi Web":

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

Namun hanya gunakan fitur ini jika aplikasi Anda mandiri, karena tombol maju / mundur dan bilah URL serta opsi berbagi dinonaktifkan. (Anda masih dapat menggesek ke kiri dan kanan) Namun pendekatan ini memungkinkan aplikasi seperti ux. Peramban layar penuh hanya dimulai ketika situs dimuat dari layar beranda. Saya juga hanya bisa berfungsi setelah saya memasukkan apple-touch-icon-180x180.png di folder root saya.

Sebagai bonus, Anda mungkin juga ingin memasukkan varian dari ini juga:

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>
denkquer
sumber
1

Anda dapat menyelesaikan tugas dengan hanya menambahkan elemen 'meta' berikut ke 'kepala' Anda:

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

Menambahkan semua atribut seperti 'lebar', 'skala awal', 'lebar maksimum', 'skala maksimum' mungkin tidak berfungsi. Karena itu, tambahkan saja elemen di atas.

Kasumi Gunasekara
sumber
-1 
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

Silakan Tambahkan Skrip ke Nonaktifkan cubitan, ketuk, fokus Zoom

Prem
sumber