Nonaktifkan Zoom Otomatis pada input "Teks" tag - Safari di iPhone

Saya membuat halaman HTML <input>dengan tag type="text". Ketika saya mengkliknya menggunakan Safari di iPhone, halaman menjadi lebih besar (zoom otomatis). Adakah yang tahu cara menonaktifkan ini?

Browser akan memperbesar jika ukuran font kurang dari 16pxdan ukuran font default untuk elemen formulir adalah 11px(setidaknya di Chrome dan Safari).

Selain itu, selectelemen harus memiliki focuspseudo-class terpasang.

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

Ini tidak perlu menggunakan semua di atas, Anda dapat hanya gaya elemen yang Anda butuhkan, misalnya: hanya text, number, dan textarea:

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

Solusi alternatif untuk mewarisi elemen input dari gaya induk:

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

Anda dapat mencegah Safari memperbesar secara otomatis pada bidang teks selama input pengguna tanpa menonaktifkan kemampuan pengguna untuk mencubit zoom. Cukup tambahkan maximum-scale=1tetapi tinggalkan atribut skala pengguna yang disarankan dalam jawaban lain.

Ini adalah opsi yang bermanfaat jika Anda memiliki formulir di lapisan yang "mengapung" di sekitar jika diperbesar, yang dapat menyebabkan elemen UI penting bergerak dari layar.

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

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

Baru: iOS masih akan memperbesar, kecuali jika Anda menggunakan 16px pada input tanpa fokus.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

Saya menambahkan latar belakang karena iOS tidak menambahkan latar belakang pada pilih.

Jika situs web Anda dirancang dengan tepat untuk perangkat seluler, Anda dapat memutuskan untuk tidak mengizinkan penskalaan.

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

Ini menyelesaikan masalah yang akan 'mengambang' di laman atau formulir seluler Anda.

Singkatnya jawabannya adalah: setel ukuran font elemen formulir ke setidaknya 16px

input[type='text'],textarea {font-size:1em;}

Cara yang tepat untuk memperbaiki masalah ini adalah mengubah meta viewport ke:

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

Tidak ada cara bersih yang bisa saya temukan, tapi ini sebuah retas ...

1) Saya perhatikan bahwa peristiwa mouseover terjadi sebelum zoom, tetapi zoom terjadi sebelum mousedown atau acara fokus.

2) Anda dapat secara dinamis mengubah tag viewport META menggunakan javascript (lihat Mengaktifkan / menonaktifkan zoom pada iPhone safari dengan Javascript? )

Jadi, coba ini (ditunjukkan dalam jquery untuk kekompakan):

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

Ini jelas merupakan peretasan ... mungkin ada situasi di mana mouseover / down tidak selalu menangkap entri / keluar, tetapi itu bekerja dengan baik dalam pengujian saya dan merupakan awal yang solid.

Tambahkan user-scalable = 0 ke meta viewport sebagai berikut

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

Bekerja untuk saya :)

Saya baru-baru ini (hari ini: D) harus mengintegrasikan perilaku ini. Agar tidak memengaruhi bidang desain asli, termasuk kombo, saya memilih untuk menerapkan transformasi pada fokus bidang:

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}

Seperti yang telah ditunjukkan oleh banyak jawaban lain, ini dapat dicapai dengan menambahkan maximum-scaleke viewporttag meta . Namun, ini memiliki konsekuensi negatif dengan menonaktifkan zoom pengguna di perangkat Android . ( Ini tidak menonaktifkan zoom pengguna pada perangkat iOS sejak v10 .)

Kita dapat menggunakan JavaScript untuk menambahkan maximum-scalemeta secara dinamis viewportsaat perangkat iOS. Ini mencapai yang terbaik dari kedua dunia: kami memungkinkan pengguna untuk memperbesar dan mencegah iOS memperbesar ke bidang teks pada fokus.

| maximum-scale             | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes                       | yes           | yes                     | no                |
| no                        | yes           | no                      | yes               |
| yes on iOS, no on Android | yes           | yes                     | yes               |

Kode:

const addMaximumScaleToMetaViewport = () => {
  const el = document.querySelector('meta[name=viewport]');

  if (el !== null) {
    let content = el.getAttribute('content');
    let re = /maximum\-scale=[0-9\.]+/g;

    if (re.test(content)) {
        content = content.replace(re, 'maximum-scale=1.0');
    } else {
        content = [content, 'maximum-scale=1.0'].join(', ')
    }

    el.setAttribute('content', content);
  }
};

const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;

// /programming/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (checkIsIOS()) {
  disableIosTextFieldZoom();
}

Retas Javascript yang berfungsi pada iOS 7. Ini didasarkan pada jawaban @dlo tetapi acara mouseover dan mouseout digantikan oleh touchstart dan touchend events. Pada dasarnya skrip ini menambahkan batas waktu setengah detik sebelum zoom diaktifkan kembali untuk mencegah zoom.

$("input[type=text], textarea").on({ 'touchstart' : function() {
    zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
    setTimeout(zoomEnable, 500);
}});

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
} 

Ini bekerja untuk saya:

input, textarea {
    font-size: initial;
}

Saya menggunakan solusi Christina di atas, tetapi dengan sedikit modifikasi untuk bootstrap dan aturan lain untuk diterapkan pada komputer desktop. Ukuran font default Bootstrap adalah 14px yang menyebabkan zoom. Berikut ini mengubahnya menjadi 16px untuk "kontrol bentuk" di Bootstrap, mencegah zoom.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .form-control {
    font-size: 16px;
  }
}

Dan kembali ke 14px untuk browser non-seluler.

@media (min-width: 768px) {
  .form-control {
    font-size: 14px;
  }
}

Saya mencoba menggunakan .form-control: focus, yang membuatnya pada 14px kecuali pada fokus yang mengubahnya menjadi 16px dan itu tidak memperbaiki masalah zoom dengan iOS8. Paling tidak pada iPhone saya menggunakan iOS8, ukuran font harus 16px sebelum fokus agar iPhone tidak memperbesar halaman.

Saya melakukan ini, juga dengan jQuery:

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

Tentu saja, beberapa elemen lain di antarmuka mungkin harus diadaptasi jika 16pxukuran font ini merusak desain.

Setelah beberapa saat mencoba saya datang dengan solusi ini

// set font-size to 16px to prevent zoom 
input.addEventListener("mousedown", function (e) {
  e.target.style.fontSize = "16px";
});

// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
  e.target.style.fontSize = "";
});

Pada "mousedown" itu mengatur ukuran font input ke 16px. Ini akan mencegah pembesaran. Pada acara fokus itu mengubah ukuran font kembali ke nilai awal.

Tidak seperti solusi yang diposting sebelumnya, ini akan memungkinkan Anda mengatur ukuran font input ke apa pun yang Anda inginkan.

Setelah membaca hampir setiap baris di sini dan menguji berbagai solusi, ini, terima kasih kepada semua yang berbagi solusi mereka, apa yang saya hasilkan, uji dan bekerja untuk saya di iPhone 7 iOS 10.x:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: initial;}
}
@media (min-width: 768px) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: inherit;}
}

Ini memiliki beberapa kontra, meskipun, terasa "lompatan" sebagai akibat dari perubahan ukuran font cepat terjadi antara "hover" ed dan "fokus" ed negara - dan dampak redraw pada kinerja

Terinspirasi oleh jawaban @jirikuchta, saya memecahkan masalah ini dengan menambahkan sedikit CSS ini:

#myTextArea:active {
  font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}

Tidak ada JS, dan saya tidak melihat ada flash atau apa pun.

Perlu dicatat bahwa dengan viewportwith maximum-scale=1juga berfungsi, tetapi tidak ketika halaman dimuat sebagai iframe, atau jika Anda memiliki beberapa skrip lain yang memodifikasi viewport, dll.

Elemen pseudo suka :focustidak berfungsi seperti biasanya. Dari iOS 11, deklarasi reset sederhana dapat ditambahkan sebelum gaya utama Anda (asalkan Anda tidak menimpanya dengan ukuran font yang lebih kecil).

/* Prevent zoom */
select, input, textarea {
  font-size: 16px;
}

Perlu disebutkan bahwa untuk pustaka CSS seperti Tachyons.css maka mudah untuk secara tidak sengaja menimpa ukuran font Anda.

Misalnya kelas: f5setara dengan:fontSize: 1rem yang baik-baik saja jika Anda tetap menggunakan skala font tubuh di default.

Namun: jika Anda memilih kelas ukuran font: f6ini akan sama dengan fontSize: .875remtampilan kecil di atas. Dalam hal itu, Anda harus lebih spesifik tentang deklarasi reset Anda:

  /* Prevent zoom */
  select, input, textarea {
    font-size: 16px!important;
  }

@media screen and (min-width: 30em) {

/* not small */

}

Omong-omong, jika Anda menggunakan Bootstrap , Anda bisa menggunakan varian ini:

.form-control {
  font-size: 16px;
}

Saya harus "memperbaiki" perbesaran otomatis ke masalah kontrol formulir untuk situs web Universitas Belanda (yang menggunakan 15px dalam kontrol formulir). Saya datang dengan serangkaian persyaratan berikut:

• pengguna harus tetap dapat memperbesar
• ukuran font harus tetap sama
• tidak ada kilatan gaya berbeda sementara
• tidak ada persyaratan jQuery
• harus bekerja pada iOS terbaru dan tidak menghalangi kombinasi OS / perangkat lainnya
• jika mungkin tidak ada timeout ajaib, dan jika perlu, hapus timer dengan benar

Inilah yang saya kemukakan sejauh ini:

/*
NOTE: This code overrides the viewport settings, an improvement would be
      to take the original value and only add or change the user-scalable value
*/

// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
  preventZoomOnFocus();


function preventZoomOnFocus()
{
  document.documentElement.addEventListener("touchstart", onTouchStart);
  document.documentElement.addEventListener("focusin", onFocusIn);
}


let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];


function onTouchStart(evt)
{
  let tn = evt.target.tagName;

  // No need to do anything if the initial target isn't a known element
  // which will cause a zoom upon receiving focus
  if (    tn != "SELECT"
      &&  tn != "TEXTAREA"
      && (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
     )
    return;

  // disable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}

// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
  // reenable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}

// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
  let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
  if (vpnode)
    vpnode.setAttribute("content",newvalue);
  else
  {
    vpnode = document.createElement("meta");
    vpnode.setAttribute("name", "viewport");
    vpnode.setAttribute("content", newvalue);
  }
}

Beberapa catatan:

• Perhatikan bahwa sejauh ini saya hanya mengujinya di iOS 11.3.1, tetapi akan segera mengujinya pada beberapa versi lain
• Penggunaan fokusDalam acara berarti membutuhkan setidaknya iOS 5.1 (tapi saya melihat situs yang kami buat bekerja dalam versi iOS yang lebih lama sebagai 9 sebagai bonus keren)
• Menggunakan delegasi acara karena banyak situs tempat saya bekerja memiliki halaman yang secara dinamis dapat membuat kontrol formulir
• Mengatur eventListeners ke elemen html (documentElement) agar tidak harus menunggu agar body tersedia (tidak mau repot memeriksa apakah dokumen sudah siap / dimuat keadaan atau perlu menunggu acara DOMContentLoaded event)

Alih-alih hanya mengatur ukuran font ke 16px, Anda dapat:

1. Gaya bidang input sehingga lebih besar dari ukuran yang dimaksudkan, memungkinkan ukuran font logis diatur ke 16px.
2. Gunakan scale()transformasi CSS dan margin negatif untuk mengecilkan bidang input ke ukuran yang benar.

Misalnya, anggap bidang input Anda awalnya ditata dengan:

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

Jika Anda memperbesar bidang dengan meningkatkan semua dimensi sebesar 16/12 = 133,33%, kemudian mengurangi penggunaan sebesar 12/12 scale()= 75%, bidang input akan memiliki ukuran visual yang benar (dan ukuran font), dan tidak akan ada pembesaran pada fokus.

Karena scale()hanya memengaruhi ukuran visual, Anda juga perlu menambahkan margin negatif untuk mengurangi ukuran logis bidang.

Dengan CSS ini:

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

bidang input akan memiliki ukuran font logis 16px sementara tampaknya memiliki teks 12px.

Saya memiliki posting blog tempat saya membahas sedikit lebih detail, dan memiliki contoh ini sebagai HTML yang dapat dilihat:
Tidak ada input zoom di Safari di iPhone, pixel sempurna

Bahkan dengan jawaban-jawaban ini, saya perlu tiga hari untuk mencari tahu apa yang sedang terjadi dan saya mungkin perlu solusinya lagi di masa depan.

Situasi saya sedikit berbeda dari yang dijelaskan.

Di tambang, saya memiliki beberapa teks yang dapat diedit di div di halaman. Ketika pengguna mengklik div BERBEDA, tombol macam, saya secara otomatis memilih beberapa teks di div yang dapat diedit (rentang pilihan yang sebelumnya telah disimpan dan dihapus), menjalankan perintah teks kaya perintah pada pilihan itu, dan membersihkannya lagi.

Ini memungkinkan saya untuk secara tak terlihat mengubah warna teks berdasarkan interaksi pengguna dengan div warna di tempat lain di halaman, sambil menjaga pemilihan yang biasanya disembunyikan untuk membiarkan mereka melihat warna dalam konteks yang tepat.

Nah, di Safari iPad, mengklik div warna mengakibatkan keyboard di layar muncul, dan tidak ada yang saya lakukan yang akan mencegahnya.

Saya akhirnya mengetahui bagaimana iPad melakukan ini.

Ini mendengarkan touchstart dan urutan touchend yang memicu pemilihan teks yang dapat diedit.

Ketika kombinasi itu terjadi, itu menunjukkan keyboard di layar.

Sebenarnya, ia melakukan dolly zoom di mana ia memperluas halaman yang mendasarinya saat memperbesar pada teks yang dapat diedit. Saya butuh satu hari hanya untuk memahami apa yang saya lihat.

Jadi solusi yang saya gunakan adalah mencegat touchstart dan touchend pada div warna tertentu. Dalam kedua penangan saya berhenti propagasi dan menggelegak dan mengembalikan false Tetapi dalam acara touchend saya memicu perilaku yang sama dengan klik yang dipicu.

Jadi, sebelumnya, Safari memicu apa yang saya pikir "touchstart", "mousedown", "touchend", "mouseup", "click", dan karena kode saya, pilihan teks, dalam urutan itu.

Urutan baru karena intersep hanyalah pemilihan teks. Segala sesuatu yang lain dicegat sebelum Safari dapat memprosesnya dan melakukan hal-hal keyboard-nya. Touchstart dan touchend intercepts mencegah peristiwa mouse untuk memicu juga, dan dalam konteks ini benar-benar baik-baik saja.

Saya tidak tahu cara yang lebih mudah untuk menggambarkan ini, tetapi saya pikir penting untuk memilikinya di sini karena saya menemukan utas ini dalam satu jam sejak pertama kali menemukan masalah ini.

Saya 98% yakin perbaikan yang sama akan bekerja dengan kotak input dan yang lainnya. Mencegah acara sentuh dan memprosesnya secara terpisah tanpa membiarkannya menyebar atau menggelembung, dan pertimbangkan untuk melakukan pilihan apa pun setelah batas waktu yang singkat hanya untuk memastikan Safari tidak mengenali urutan sebagai pemicu keyboard.

Saya melihat orang-orang di sini melakukan beberapa hal aneh dengan JavaScript atau fungsi viewport dan mematikan semua pembesaran perangkat secara manual. Itu seharusnya tidak menjadi solusi menurut saya. Menambahkan potongan CSS ini akan mematikan zoom otomatis di iOS tanpa mengubah ukuran font Anda ke nomor tetap seperti 16px.

Secara default, saya menggunakan ukuran font 93,8% (15px) pada kolom input dan dengan menambahkan potongan CSS saya ini tetap pada 93,8%. Tidak perlu mengubah ke 16px atau menjadikannya nomor tetap.

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}

Menyetel ukuran font (untuk bidang input) sama dengan ukuran font tubuh, tampaknya yang mencegah peramban memperkecil atau memperbesar. Saya sarankan untuk menggunakan font-size: 1remsebagai solusi yang lebih elegan.

Karena zoom-in otomatis (tanpa zoom-out) masih bersifat anonim di iPhone, inilah JavaScript berdasarkan saran dlo yang bekerja dengan fokus / blur.

Pembesaran dinonaktifkan segera setelah input teks difusi dan diaktifkan kembali saat input dibiarkan.

Catatan: Beberapa pengguna mungkin tidak menghargai mengedit teks dalam input teks kecil! Oleh karena itu, saya pribadi lebih suka mengubah ukuran teks input saat mengedit (lihat kode di bawah).

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function onBeforeZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "user-scalable=0";
    }
}
function onAfterZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "width=device-width, user-scalable=1";
    }
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

Kode berikut akan mengubah ukuran teks input menjadi 16 piksel (dihitung, yaitu, dalam ukuran zoom saat ini) selama elemen memiliki fokus. Karena itu iPhone tidak akan secara otomatis memperbesar.

Catatan: Faktor zoom dihitung berdasarkan window.innerWidth dan tampilan iPhone dengan 320 piksel. Ini hanya akan berlaku untuk iPhone dalam mode potret.

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function getSender(evt, local) {
    if (!evt) {
        evt = window.event;
    }
    var sender;
    if (evt.srcElement) {
        sender = evt.srcElement;
    } else {
        sender = local;
    }
    return sender;
}
function onBeforeZoom(evt) {
    var zoom = 320 / window.innerWidth;
    var element = getSender(evt);
    element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
    var element = getSender(evt);
    element.style.fontSize = "";
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

Butuh beberapa saat untuk menemukannya tetapi inilah kode terbaik yang saya temukan ...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});

Berdasarkan jawaban Stephen Walsh ... Kode ini berfungsi tanpa mengubah ukuran font input pada fokus (yang terlihat lumpuh), ditambah lagi masih berfungsi dengan FastClick , yang saya sarankan tambahkan ke semua situs seluler untuk membantu menghadirkan "tajam". Sesuaikan "lebar viewport" Anda agar sesuai dengan kebutuhan Anda.

// disable autozoom when input is focused
    var $viewportMeta = $('head > meta[name="viewport"]');
    $('input, select, textarea').bind('touchend', function(event) {
        $viewportMeta.attr('content', 'width=640, user-scalable=0');
        setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
    });

Sebuah komentar untuk jawaban teratas tentang pengaturan ukuran font ke 16px bertanya bagaimana itu solusi, bagaimana jika Anda menginginkan font yang lebih besar / lebih kecil.

Saya tidak tahu tentang Anda semua, tetapi menggunakan px untuk ukuran font bukan cara terbaik, Anda harus menggunakan em.

Saya mengalami masalah ini di situs responsif saya di mana bidang teks saya lebih besar dari 16 piksel. Saya mengatur wadah formulir saya ke 2rem dan bidang input saya disetel ke 1.4em. Dalam kueri seluler saya, saya mengubah ukuran font html tergantung pada viewport. Karena html default adalah 10, bidang input saya menghitung hingga 28px di desktop

Untuk menghapus zoom-otomatis, saya harus mengubah input ke 1.6em. Ini meningkatkan ukuran font saya menjadi 32px. Hanya sedikit lebih tinggi dan hampir tidak terlihat. Di iPhone 4 & 5 saya mengubah ukuran font html saya menjadi 15px untuk potret dan kembali ke 10px untuk lanskap. Tampaknya sweet spot untuk ukuran piksel itu adalah 48px itulah sebabnya saya berubah dari 1.4em (42px) menjadi 1.6em (48px).

Hal yang perlu Anda lakukan adalah menemukan sweet spot pada ukuran font dan kemudian mengubahnya mundur dalam ukuran rem / em Anda.

Ini adalah retas yang saya gunakan di salah satu proyek saya:

select {
    font-size: 2.6rem; // 1rem = 10px
    ...
    transform-origin: ... ...;
    transform: scale(0.5) ...;
}

Berakhir dengan gaya dan skala awal yang saya inginkan tetapi tidak ada zoom pada fokus.