Giriş “Metin” etiketinde Otomatik Yakınlaştırmayı Devre Dışı Bırakma - iPhone'da Safari

<input>Etiketi olan bir HTML sayfası yaptım type="text". İPhone'da Safari kullanarak tıkladığımda sayfa büyür (otomatik yakınlaştırma). Bunu nasıl devre dışı bırakacağını bilen var mı?

Yazı tipi boyutu küçükse 16pxve form öğeleri için varsayılan yazı tipi boyutu 11px(en azından Chrome ve Safari'de) ise tarayıcı yakınlaştırır .

Ayrıca, selectöğenin focussözde sınıfının eklenmiş olması gerekir.

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

Sadece: Bu sadece stil öğeleri, örneğin, ihtiyaç olabilir, her şeyden önce kullanılması gerekli değildir text, numberve textarea:

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

Giriş öğelerinin üst stilden miras alması için alternatif çözüm:

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

Safari'nin , kullanıcının yakınlaştırma sıkıştırma özelliğini devre dışı bırakmadan kullanıcı girişi sırasında metin alanlarına otomatik olarak yakınlaştırma yapmasını engelleyebilirsiniz . maximum-scale=1Diğer yanıtlarda önerilen kullanıcı ölçeği özelliğini eklemeniz yeterlidir.

Bir katmandaki yakınlaştırılmışsa "yüzen" bir formunuz varsa, önemli UI öğelerinin ekrandan çıkmasına neden olabilecek değerli bir seçenektir.

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

Yeni: Odak olmadan girişte 16 piksel kullanmazsanız IOS yine de yakınlaştırılır.

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

IOS seçime arka plan eklemediğinden arka plan ekledim.

Web siteniz bir mobil cihaz için uygun şekilde tasarlanmışsa, ölçeklendirmeye izin vermemeye karar verebilirsiniz.

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

Bu, mobil sayfanızın veya formunuzun "kayan" sorunu çözer.

Özet olarak cevap: form öğelerinin yazı tipi boyutunu en az 16 piksel olarak ayarlamak

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

Bu sorunu düzeltmenin uygun yolu meta görünüm alanını şu şekilde değiştirmektir:

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

Bulabileceğim temiz bir yol yok, ama işte bir hack ...

1) Fareyle üzerine gelme etkinliğinin zumdan önce gerçekleştiğini, ancak zum farenin önünden veya netleme etkinliklerinden önce gerçekleştiğini fark ettim.

2) Dinamik javascript kullanarak META görünüm penceresi etiketi değiştirebilirsiniz (bkz Javascript ile iPhone safari / devre dışı zoom etkinleştirme? )

Bunu deneyin (kompaktlık için jquery'de gösterilmiştir):

$("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" />');
}

Bu kesinlikle bir hack ... fareyle üzerine gelme / aşağıya her zaman girişleri / çıkışları yakalamayan durumlar olabilir, ancak testlerimde iyi çalıştı ve sağlam bir başlangıç ​​oldu.

Viewport meta'ya aşağıdaki gibi user-scalable = 0 ekleyin

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

Benim için çalıştı :)

Son zamanlarda (bugün: D) bu davranışı bütünleştirmek zorunda kaldım. Kombo dahil orijinal tasarım alanlarını etkilememek için, dönüşümü alanın odağına uygulamayı seçtim:

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

Diğer birçok yanıtın da belirttiği gibi, bu maximum-scale, meta viewportetikete eklenerek elde edilebilir . Ancak, bunun Android cihazlarda kullanıcı yakınlaştırmasını devre dışı bırakmanın olumsuz bir sonucu vardır . ( V10'dan beri iOS cihazlarda kullanıcı yakınlaştırma özelliğini devre dışı bırakmaz .)

Cihaz iOS olduğunda maximum-scalemetaya dinamik olarak eklemek için JavaScript kullanabiliriz viewport. Bu, her iki dünyanın en iyisini elde eder: kullanıcının yakınlaştırma ve iOS'un odaktaki metin alanlarına yakınlaştırma yapmasını önleriz.

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

Kod:

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

İOS 7 üzerinde çalışan Javascript hack'i. Temel olarak bu komut dosyası, yakınlaştırmayı önlemek için yakınlaştırmanın yeniden etkinleştirilmesinden yarım saniye önce bir zaman aşımı süresi ekler.

$("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" />');
} 

Bu benim için çalıştı:

input, textarea {
    font-size: initial;
}

Yukarıda Christina'nın çözümünü kullandım, ancak önyükleme için küçük bir değişiklikle ve masaüstü bilgisayarlara uygulamak için başka bir kuralla. Önyüklemenin varsayılan yazı tipi boyutu, yakınlaştırmaya neden olan 14 pikseldir. Aşağıdakiler Bootstrap'taki "form kontrolleri" için 16 piksel olarak değiştirerek yakınlaştırmayı önler.

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

Mobil olmayan tarayıcılar için 14 piksele geri dönelim.

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

.Form-control: focus'u kullanmayı denedim, odak noktası hariç 16px olarak değiştirildi ve iOS8 ile yakınlaştırma sorununu çözmedi. En azından iOS8 kullanan iPhone'umda, iPhone'un sayfayı yakınlaştırmaması için odaklanmadan önce yazı tipi boyutu 16 piksel olmalıdır.

Bunu jQuery ile de yaptım:

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

Tabii ki, bu 16pxyazı tipi boyutu tasarımı bozarsa arabirimdeki diğer bazı öğelerin uyarlanması gerekebilir .

Bir süre denedikten sonra bu çözümü buldum

// 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 = "";
});

"Fareyle üzerine gelindiğinde" girdinin yazı tipi boyutunu 16 piksel olarak ayarlar. Bu yakınlaştırmayı engelleyecektir. Odak olayında yazı tipi boyutunu ilk değerine geri döndürür.

Daha önce yayınlanan çözümlerin aksine, girişin yazı tipi boyutunu istediğiniz gibi ayarlamanıza izin verir.

Buradaki hemen hemen her satırı okuduktan ve çeşitli çözümleri test ettikten sonra, çözümlerini paylaşan herkes, iPhone 7 iOS 10.x'te benim için bulduğum, test ettiğim ve benim için çalıştığım sayesinde:

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

Bununla birlikte, "fareyle üzerine gelindi" ve "odaklan" düzenlenmiş durumlar arasındaki hızlı yazı tipi boyutu değişikliğinin ve performans üzerindeki yeniden çizim etkisinin bir sonucu olarak dikkat çekici bir şekilde "zıplama" özelliği vardır.

@Jirikuchta'nın cevabından esinlenerek, bu sorunu CSS'yi ekleyerek çözdüm:

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

JS yok ve flaş ya da hiçbir şey fark etmiyorum.

Belirterek It değerinde bir viewportile maximum-scale=1de çalışır, ancak sayfa bir iframe yüklendiğinde değilken veya başka senaryoyu değiştirerek varsa viewport, vs.

Pseudo gibi elemanlar :focuseskisi gibi çalışmıyor. İOS 11'den, ana stillerinizden önce basit bir sıfırlama bildirimi eklenebilir (daha küçük yazı tipi boyutuyla geçersiz kılmamanız koşuluyla).

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

Tachyons.css gibi CSS kütüphaneleri için yazı tipi boyutunuzu yanlışlıkla geçersiz kılmanın kolay olduğunu belirtmek gerekir.

Örneğin class: f5şuna eşdeğerdir: Bu fontSize: 1rem, gövde yazı tipi ölçeğini varsayılan olarak koruduysanız iyi olur.

Ancak: yazı tipi boyutu sınıfını seçerseniz: f6bu, fontSize: .875remküçük bir ekranda yukarı doğru eşdeğer olacaktır . Bu durumda, sıfırlama bildirimleriniz hakkında daha spesifik olmanız gerekir:

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

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

/* not small */

}

Bu arada, Bootstrap kullanıyorsanız, bu varyantı kullanabilirsiniz:

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

Bir Hollanda Üniversitesi web sitesi (form denetimlerinde 15px kullanılan) için form denetimleri sorunu otomatik yakınlaştırma "düzeltmek" zorunda kaldı. Aşağıdaki gereksinimleri karşıladım:

• kullanıcı yine de yakınlaşabilmelidir
• yazı tipi boyutu aynı kalmalıdır
• geçici farklı stil yanıp sönmez
• jQuery gereksinimi yok
• en yeni iOS'ta çalışmalı ve başka bir OS / cihaz kombinasyonunu engellememelidir
• mümkünse sihirli zaman aşımı yok ve gerekirse doğru zamanlayıcıları temizleyin

Şimdiye kadar bulduğum şey bu:

/*
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);
  }
}

Bazı notlar:

• Şimdiye kadar sadece iOS 11.3.1'de test ettiğimi, ancak yakında diğer birkaç sürümde test edeceğimizi unutmayın
• FocusIn olaylarının kullanımı, en az iOS 5.1 gerektirdiği anlamına gelir (ancak iOS 9'da çalıştığımız siteleri zaten harika bir bonus olarak görüyorum)
• Üzerinde çalıştığım birçok site dinamik olarak form denetimleri oluşturabilecek sayfalara sahip olduğu için etkinlik yetkisi kullanma
• EventListeners'ı html öğesine (documentElement) ayarlamak, gövdenin kullanılabilir olmasını beklemek zorunda kalmayacak şekilde ayarlama (belgenin hazır / yüklü durumu olup olmadığını kontrol etmek veya DOMContentLoaded olayını beklemek zorunda kalmak istemiyorum)

Yazı tipi boyutunu 16 piksel olarak ayarlamak yerine şunları yapabilirsiniz:

1. Giriş alanını, mantıksal yazı tipi boyutunun 16 piksele ayarlanmasına izin verecek şekilde, hedeflenen boyuttan daha büyük olacak şekilde biçimlendirin.
2. Giriş alanını doğru boyuta küçültmek için scale()CSS dönüşümünü ve negatif kenar boşluklarını kullanın.

Örneğin, giriş alanınızın orijinal olarak şu özelliklere sahip olduğunu varsayalım:

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

Tüm boyutları% 16/12 =% 133,33 oranında artırarak alanı büyütürseniz, kullanımı% 12/16 =% scale()75 oranında azaltırsanız , giriş alanı doğru görsel boyuta (ve yazı tipi boyutuna) sahip olur ve yakınlaştırma olmaz odaklanır.

Gibi scale()sadece görsel boyutunu etkiler, ayrıca alanın mantıksal boyutunu azaltmak için negatif kenar boşlukları eklemesi gerekir.

Bu CSS ile:

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

giriş alanı 12 piksellik metin içeriyorken 16 punto mantıksal yazı tipi boyutuna sahip olacaktır.

Biraz daha ayrıntıya gittiğim bir blog yayınım var ve bu örneği görüntülenebilir HTML olarak var:
iPhone'da Safari'de giriş yakınlaştırma yok, piksel mükemmel yolu

Bu cevaplarla bile neler olup bittiğini anlamak üç günümü aldı ve gelecekte tekrar çözüme ihtiyacım olabilir.

Durumum tarif edilenden biraz farklıydı.

Benimkinde, sayfadaki bir div'da bazı çekici metinler vardı. Kullanıcı FARKLI bir div'ı, bir çeşit düğmeyi tıkladığında, içerik düzenlenebilir div'de (daha önce kaydedilmiş ve temizlenmiş bir seçim aralığı) bazı metinleri otomatik olarak seçtim, o seçimde zengin bir metin execCommand çalıştırdım ve tekrar temizledim.

Bu, renkleri doğru bağlamda görmelerini sağlamak için seçimi normalde gizli tutarken, metin renklerini sayfanın başka yerlerindeki renk div'leriyle kullanıcı etkileşimlerine göre görünmez bir şekilde değiştirmemi sağladı.

İPad'in Safari'sinde, renk div'i tıklamak ekran klavyesinin ortaya çıkmasına neden oldu ve yaptığım hiçbir şey bunu engellemedi.

Sonunda iPad'in bunu nasıl yaptığını anladım.

Bir düzenlenebilir metin seçimini tetikleyen bir dokunmatik başlangıç ​​ve dokunma sırası dizisini dinler.

Bu kombinasyon gerçekleştiğinde ekran klavyesini gösterir.

Aslında, düzenlenebilir metni yakınlaştırırken alttaki sayfayı genişlettiği bir dolly yakınlaştırma yapar. Sadece ne gördüğümü anlamak bir günümü aldı.

Bu yüzden kullandığım çözüm, söz konusu renk div'larında hem dokunmatik başlatmayı hem de dokunmayı durdurmaktı. Her iki işleyicide de yayılımı ve köpürmeyi durdurup yanlış döndürürüm. Ancak, touchend etkinliğinde tıklamanın tetiklediği aynı davranışı tetiklerim.

Bu yüzden, Safari daha önce "touchstart", "mousedown", "touchend", "mouseup", "click" ve kodum nedeniyle bir metin seçimini bu sırayla tetikledi.

Kesişmeler nedeniyle yeni dizi basitçe metin seçimidir. Safari işlemeden ve klavye işlerini yapmadan önce her şey ele geçirilir. Touchstart ve touchend müdahaleleri, fare olaylarının da tetiklenmesini önler ve bağlamda bu tamamen iyidir.

Bunu tanımlamak için daha kolay bir yol bilmiyorum ama ilk konu ile karşılaştıktan sonra bir saat içinde bu konu buldum çünkü burada olması önemli olduğunu düşünüyorum.

Aynı düzeltmenin giriş kutuları ve başka bir şeyle çalışacağından% 98 eminim. Dokunma olaylarını durdurun ve yayılmasına veya kabarmasına izin vermeden bunları ayrı ayrı işleyin ve Safari'nin diziyi klavye tetikleyicisi olarak tanımadığından emin olmak için küçük bir zaman aşımından sonra herhangi bir seçim yapmayı düşünün.

Buradaki kullanıcıların JavaScript veya görünüm alanı işleviyle garip şeyler yaptığını ve cihazlarda tüm manuel yakınlaştırmayı kapattığını görüyorum. Bence bu bir çözüm olmamalı. Bu CSS snippet'inin eklenmesi, yazı tipi boyutunu 16 piksel gibi sabit bir sayıya değiştirmeden iOS'ta otomatik yakınlaştırmayı kapatır.

Varsayılan olarak, giriş alanlarında% 93,8 (15 piksel) yazı tipi boyutu kullanıyorum ve CSS snippet'imi ekleyerek bu% 93,8'de kalıyor. 16px olarak değiştirmenize veya sabit bir sayı yapmanıza gerek yoktur.

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

Vücudun yazı tipi boyutuna eşit bir yazı tipi boyutu (giriş alanları için) ayarlamak, tarayıcının uzaklaştırılmasını veya içeri girmesini engelleyen şey gibi görünüyor. font-size: 1remDaha zarif bir çözüm olarak kullanmanızı öneririm .

Otomatik yakınlaştırma (uzaklaştırma olmadan) iPhone'da hala anonim olduğundan, dlo'nun odaklama / bulanıklaştırma ile çalışan önerisine dayanan bir JavaScript.

Bir metin girişi odaklandığında ve giriş bırakıldığında yeniden etkinleştirildiğinde yakınlaştırma devre dışı bırakılır.

Not: Bazı kullanıcılar küçük bir metin girişindeki metinleri düzenlemeye uygun olmayabilir! Bu nedenle, şahsen düzenleme sırasında girişin metin boyutunu değiştirmeyi tercih ederim (aşağıdaki koda bakın).

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

Aşağıdaki kod, öğenin odağa sahip olması durumunda bir girişin metin boyutunu 16 piksele değiştirir (yani, mevcut yakınlaştırma boyutunda hesaplanır). iPhone bu nedenle otomatik olarak yakınlaştırılmaz.

Not: Yakınlaştırma faktörü window.innerWidth ve iPhone'un ekranını 320 piksel olarak hesaplar. Bu yalnızca portre modunda iPhone için geçerli olacaktır .

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

Onu bulmak biraz zaman aldı ama işte bulduğum en iyi kod ... 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));
});

Stephen Walsh'un cevabına dayanarak ... Bu kod, odaktaki girişlerin yazı tipi boyutunu değiştirmeden çalışır (topal görünüyor), ayrıca hala "hızlı" getirmeye yardımcı olmak için tüm mobil sitelere eklemenizi önerdiğim FastClick ile çalışıyor . "Görüntü alanı genişliğinizi" ihtiyaçlarınıza göre ayarlayın.

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

Yazı tipi boyutunu 16 piksele ayarlama hakkındaki en iyi cevaba yapılan açıklama, bunun nasıl bir çözüm olduğunu sordu, daha büyük / daha küçük yazı tipi istiyorsanız.

Hepinizi bilmiyorum, ama yazı tipi boyutları için px kullanmak en iyi yol değil, em kullanıyor olmalısınız.

Metin alanımın 16 pikselden büyük olduğu duyarlı sitemde bu sorunla karşılaştım. Form kabım 2rem ve girdi alanım 1.4em olarak ayarlanmıştı. Mobil sorgularımda, görünüme bağlı olarak html yazı tipi boyutunu değiştiriyorum. Varsayılan html 10 olduğundan, giriş alanım masaüstünde 28 piksel olarak hesaplanır

Otomatik yakınlaştırmayı kaldırmak için girişimi 1.6em olarak değiştirmek zorunda kaldım. Bu, yazı tipi boyutumu 32 piksele yükseltti. Sadece biraz daha yüksek ve neredeyse hiç fark edilmez. İPhone 4 ve 5'imde html yazı tipi boyutumu portre için 15 piksel ve manzara için 10 piksel olarak değiştiriyorum. Bu piksel boyutu için tatlı noktanın 48 piksel olduğu anlaşılıyor, bu yüzden 1.4em'den (42px) 1.6em'e (48px) değiştirdim.

Yapmanız gereken şey, yazı tipi boyutunda tatlı noktayı bulmak ve daha sonra rem / em boyutlarınızda geriye doğru dönüştürmektir.

İşte projelerimden birinde kullandığım bir kesmek:

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

İlk stiller ve ölçek istedim ama odak yakınlaştırma ile sona erdi.