iOS 10+ safari görünüm yakınlaştırma devre dışı bırakılsın mı?

Benim iPhone 6 artı iOS'a 10 beta sürümünü güncellemek ve sadece mobil safari, çift dokunarak herhangi web sayfalarını yakınlaştırabilir veya kıstırma gördük YOKSAYuser-scalable=no meta etiketinde kodu. Bunun bir hata veya özellik olup olmadığını bilmiyorum. Bir özellik olarak kabul edilirse, iOS 10 safarisini yakınlaştırma görünüm penceresini nasıl devre dışı bırakabiliriz?

iOS 12/11 serbest bırakılması güncellenen iOS 11 ve iOS 12 safari hala DO NOT saygı user-scalable=nometa etiketi.

İOS 10'da safari'de web sayfası ölçeklendirmesini önlemek mümkündür, ancak sizin açınızdan daha fazla çalışma gerektirecektir. Argüman, bir derece zorluğun, kargo-kült geliştiricilerinin her kullanıcı portu etiketine "user-scalable = no" düşürmesini ve görme engelli kullanıcılar için gereksiz yere zor hale getirmesini durdurması gerektiğidir.

Yine de, Apple'ın uygulamalarını değiştirdiğini görmek istiyorum, böylece yakınlaştırmak için çift dokunmayı devre dışı bırakmanın basit (meta-tag) bir yolu var. Zorlukların çoğu bu etkileşim ile ilgilidir.

Tutam-yakınlaştırmayı aşağıdaki gibi bir şeyle durdurabilirsiniz:

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

Daha derin hedefler olayda stopPropagation'ı çağırırsa, olayın belgeye ulaşmayacağını ve ölçekleme davranışının bu dinleyici tarafından engellenmeyeceğini unutmayın.

Yakınlaştırmak için çift dokunmayı devre dışı bırakmak benzerdir. Belgedeki herhangi bir dokunmayı önceki dokunmadan 300 milisaniye içinde devre dışı bırakırsınız:

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

Form öğelerinizi doğru şekilde ayarlamazsanız, bir girişe odaklanmak otomatik yakınlaştırma yapar ve çoğunlukla manuel yakınlaştırmayı devre dışı bıraktığınız için, şimdi unzoom'un açılması neredeyse imkansız olacaktır. Giriş yazı tipi boyutunun> = 16 piksel olduğundan emin olun.

Bunu yerel bir uygulamadaki bir WKWebView'de çözmeye çalışıyorsanız, yukarıda verilen çözüm uygulanabilir, ancak bu daha iyi bir çözümdür: https://stackoverflow.com/a/31943976/661418 . Diğer yanıtlarda belirtildiği gibi, iOS 10 beta 6'da Apple şimdi meta etiketi onurlandırmak için bir bayrak sağladı.

Mayıs 2017 Güncellemesi: Sıkıştırma yakınlaştırmayı devre dışı bırakma için eski 'dokunmatik başlangıçta dokunma uzunluğunu kontrol et' yöntemini daha basit bir 'check event.scale on touchmove' yaklaşımıyla değiştirdim. Herkes için daha güvenilir olmalı.

Bu, iOS 10'daki yeni bir özelliktir.

İOS 10 beta 1 sürüm notlarından:

• Safari'deki web sitelerindeki erişilebilirliği artırmak için, kullanıcılar artık bir web sitesi user-scalable=nogörünüm penceresinde ayarlandığında bile yakınlaştırma / uzaklaştırma yapabilir .

Bunu bir şekilde devre dışı bırakmak için yakında bir JS eklentisi göreceğimizi umuyorum.

touch-actionTek tek öğeler üzerinde css özelliğini kullanarak bu düzeltmek mümkün . touch-action: manipulation;Bağlantılar veya düğmeler gibi yaygın olarak tıklanan öğeleri ayarlamayı deneyin .

Bu davranışın, yazım sırasında beta 6 olan en son betada değiştiği anlaşılıyor.

İOS 10 Beta 6 sürüm notlarından:

WKWebViewartık varsayılan olarak user-scalable=nobir görünüm penceresinden saygı duymaktır. Müşteriler WKWebViewerişilebilirliğini iyileştirmek ve kullanıcıları pinch-to-zoom için tüm sayfalarda ayarlayarak izin verebilir WKWebViewConfiguration özelliği ignoresViewportScaleLimitsiçin YES.

Ancak, (çok sınırlı) testlerimde, bunun böyle olduğunu henüz doğrulayamıyorum.

Düzenleme: doğrulandı, iOS 10 Beta 6 user-scalable=novarsayılan olarak benim için saygı duyuyor .

Bu yazarken Mobile Safari'de çalışan geçici çözüm, üçüncü argümanın olması addEventListenergerektiğinden { passive: false }, tam çözüm aşağıdaki gibi görünür:

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

Geriye dönük olarak uyumlu kalmak için seçeneklerin desteklenip desteklenmediğini kontrol etmek isteyebilirsiniz .

Daha sağlam bir javascript seçeneği arayan yaklaşık bir saat geçirdim ve bir tane bulamadık. Öyle ki, son birkaç gündür hammer.js ile uğraşıyorum (Hammer.js, her türlü dokunma olayını kolayca idare etmenizi sağlayan bir kütüphane) ve çoğunlukla yapmaya çalıştığım şeyde başarısız oldu.

Bu uyarı ve hiçbir şekilde bir javascript uzmanı olduğumu anlamakla, bu, çimdik yakınlaştırma ve çift dokunma olaylarını yakalamak ve daha sonra bunları günlüğe kaydetmek ve atmak için hammer.js'den temel olarak yararlandığım bir çözüm.

Sayfanıza hammer.js'yi eklediğinizden emin olun ve bu javascript'i kafaya bir yere yapıştırmayı deneyin:

< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >

  // SPORK - block pinch-zoom to force use of tooltip zoom
  $(document).ready(function() {

    // the element you want to attach to, probably a wrapper for the page
    var myElement = document.getElementById('yourwrapperelement');
    // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
    var hammertime = new Hammer(myElement, {
      prevent_default: false,
      touchAction: "pan"
    });

    // pinch is not enabled by default in hammer
    hammertime.get('pinch').set({
      enable: true
    });

    // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
    hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
      console.log('captured event:', e.type);
      e.preventDefault();
    })
  });
</script>

Kıstırma-yakınlaştırma ile ilgili önceki yanıtı denedim

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

ancak event.touches.length> 1 olduğunda ekran hala yakınlaşır > 1 Ekranda herhangi bir parmağın hareket etmesini önlemek için touchmove olayını kullanmanın en iyi yolunu buldum. Kod şöyle bir şey olacaktır:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

Umarım yardımcı olur.

Touchove olayında ölçek faktörü olup olmadığını kontrol edin, ardından dokunma olayını önleyin.

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

İstediğimiz her şeyi bir stil kuralı enjekte ederek ve yakınlaştırma olaylarına müdahale ederek elde edebiliriz:

$(function () {
  if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
  $(document.head).append(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

Pin Sıkıştırma zumunu devre dışı bırakır.

✔ Çift dokunma yakınlaştırmayı devre dışı bırakır.

✔ Kaydırma etkilenmez.

Tap Hafifçe vurma özelliğini devre dışı bırakır (iOS'ta stil kuralı tarafından tetiklenir).

DİKKAT: iOS algılamasını beğeninize göre değiştirin. Burada daha fazlası .

Cevapları yukarıdaki kodda değiştirilmiş olarak görünen lukejackson ve Piotr Kowalski'den özür dileriz .

Oldukça naif bir çözüm buldum, ama işe yarıyor gibi görünüyor. Amacım, kazara çift dokunmanın yakınlaştırma olarak yorumlanmasını önlemek ve erişilebilirlik için yakınlaştırmak için çimdik tutmaktı.

Fikir, çift ​​dokunuşta birinci touchstartve ikinci touchendarasındaki süreyi ölçmek ve daha sonra touchendgecikme çok küçükse sonuncuyu tıklama olarak yorumlamaktır . Yanlışlıkla yakınlaştırmayı önlerken, bu yöntem listenin kaydırılmasından etkilenmez gibi görünüyor, bu da güzel. Yine de bir şey kaçırmadım emin değilim.

let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;

document.addEventListener('touchstart', () => {
  preLastTouchStartAt = lastTouchStartAt;
  lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
  const touchEndAt = +new Date();
  if (touchEndAt - preLastTouchStartAt < delay) {
    event.preventDefault();
    event.target.click();
  }
});

Kuşatma ve Joseph'in cevabından bir esinlenerek ilham aldı .

Benim özel durumumda, bir 3D sahne oluşturmak için Babylon.js kullanıyorum ve tüm sayfam bir tam ekran tuvalden oluşuyor. 3D motorun kendi yakınlaştırma işlevi vardır, ancak iOS'ta kıstırma ile yakınlaştırma buna engel olur. Sorunumun üstesinden gelmek için @Joseph cevabını güncelledim. Devre dışı bırakmak için, olay dinleyicisine bir seçenek olarak {passive: false} iletmem gerektiğini anladım. Aşağıdaki kod benim için çalışıyor:

window.addEventListener(
    "touchmove",
    function(event) {
        if (event.scale !== 1) {
            event.preventDefault();
        }
    },
    { passive: false }
);

Göründüğü kadar garip, en azından iOS 10.2'deki Safari için, öğeniz veya atalarından herhangi biri aşağıdakilerden birine sahipse yakınlaştırmak için çift dokunma sihirli bir şekilde devre dışı bırakılır:

1. Bir onClick dinleyicisi - basit bir noop olabilir.
2. cursor: pointerCSS'de bir set

İstenmeyen yakınlaştırma aşağıdaki durumlarda gerçekleşir:

• Kullanıcı arayüzün bir bileşenine iki kez dokunur
• Bir kullanıcı iki veya daha fazla hane (görünüm) kullanarak görünüm penceresiyle etkileşime girer

Çift dokunma davranışını önlemek için iki çok basit geçici çözüm buldum:

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

Bunların her ikisi de Safari'nin (iOS 10.3.2) düğmeyi yakınlaştırmasını önler . Birinin yalnızca JavaScript olduğunu, diğerinin yalnızca CSS olduğunu görebilirsiniz. Uygun şekilde kullanın.

İşte bir demo: https://codepen.io/lukejacksonn/pen/QMELXQ

Sıkıştırma davranışını önlemeye çalışmadım (henüz), çünkü öncelikle web için çoklu dokunmatik arayüzler oluşturma eğiliminde değilim ve ikinci olarak belki de yerel uygulama kullanıcı arayüzü dahil tüm arayüzlerin "yakınlaştırmak için çimdik" olması gerektiği fikrine geldim. yerlerde kullanılabilir. Hala kullanıcı önlemek için dizayn ediyorum haiz ne pahasına olursa olsun, onlara UI erişilebilir hale getirmek için bunu yapmak.

Yakınlaştırmak için çift tıklamayı önleyen bu basit işi bulundu:

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);

İstendiği gibi, yorumumu bir cevaba aktardım, böylece insanlar bunu oylayabilir:

Bu, iOS 13 için% 90 oranında çalışır:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

ve

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

Yukarıdaki tüm cevapları pratikte iOS sayfam (iPhone 6, iOS 10.0.2) ile kontrol ettim, ancak başarılı olamadım. Bu benim çalışma çözümüm:

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});

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

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);