Dokunmatik cihazlarda tarayıcıda çift dokunma "yakınlaştırma" seçeneğini devre dışı bırakın

112

İstiyorum devre dışı çift dokunun yakınlaştırma işlevi belirtilen unsurları , (dokunmatik cihazlarda) tarayıcıda tüm yaklaştırma işlevini devre dışı bırakmadan .

Örneğin: Bir şeyin olması için bir öğeye birden çok kez dokunulabilir. Bu, masaüstü tarayıcılarda iyi çalışır (beklendiği gibi), ancak dokunmatik cihaz tarayıcılarında yakınlaştırır.

— Wouter Konecny
kaynak

Yakınlaştırma için olmasa da, işte diğer bazı önemli olanlar - `-webkit-dokunmatik belirtme çizgisi: yok; -webkit-text-size-ayarlama: yok; -webkit-user-select: yok;

— Udayraj Deshmukh

99

Not (2020-08-04 itibariyle): Bu çözüm iOS Safari v12 + 'da çalışmıyor gibi görünüyor. Bu cevabı güncelleyeceğim ve iOS Safari'yi kapsayan net bir çözüm bulduğumda bu notu sileceğim.

Yalnızca CSS çözümü

touch-action: manipulationAşağıdaki disable-dbl-tap-zoomsınıfta olduğu gibi, çift dokunarak yakınlaştırmayı devre dışı bırakmak istediğiniz herhangi bir öğeye ekleyin :

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

Gönderen touch-actiondocs (vurgu benim):

manipülasyon

Kaydırma ve kıstırma hareketlerini etkinleştirin, ancak yakınlaştırmak için çift dokunma gibi standart olmayan ek hareketleri devre dışı bırakın .

Bu değer Android ve iOS'ta çalışır.

— Ross Allen
kaynak

@SergoPasoevi, işe yaramayan bir örnek oluşturabilir misin? Bu çözümü iOS 12 için kullanıyorum ve benim için çalışıyor.

— Ross Allen

@SergoPasoevi ile aynı sorunu görüyorum, iOS 12'de çalışmıyor

— Trevor Jex

Benim için iOS 12'de çalıştı!

— KB2497

2

Tüm vücudunuzu dokunma eylemiyle sarmanın dezavantajları nelerdir: manipülasyon?

— oygen

1

Bir görüntüye çift dokunduğunuzda en son iOS'ta çalışmıyor.

— Adam Silver

54

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

Bunu son zamanlarda kullandım ve iPad'de iyi çalışıyor. Android veya diğer cihazlarda test edilmemiştir (çünkü web sitesi yalnızca iPad'de görüntülenecektir).

— Kablam
kaynak

16

Bu, TÜM yakınlaştırma işlevini devre dışı bırakacak, maalesef bu benim sorum değildi. Yalnızca belirli öğeleri devre dışı bırakmak istiyorum.

— Wouter Konecny

Oi saçmalığı. Tersi okudum, başarısızlık benden. Afedersiniz!

— Kablam

5

Bu çözüme ne dersiniz? Yalnızca iOS, ancak belki de değiştirilebilir mi? : gist.github.com/2047491

— Kablam

2

@WouterKonecny Kullanıcı temsilcisini kaldırırsanız, dokunmatik başlatma olayını destekleyen herhangi bir cihazda çalışması gerektiğini işaretleyin. Bu cihazları tespit etmek için isEventSupported

— nxt

4

Apple artık bunu resmi olarak görmezden geliyor. github.com/w3c/html/issues/602

— catamphetamine

38

Bunun eski olabileceğini biliyorum, ancak benim için mükemmel bir şekilde çalışan bir çözüm buldum. Çılgın meta etiketlere ve içerik yakınlaştırmayı durdurmaya gerek yok.

~~Cihazlar arası ne kadar güçlü olduğundan% 100 emin değilim~~ama tam olarak istediğim gibi çalıştı.

$('.no-zoom').bind('touchend', function(e) {
  e.preventDefault();
  // Add your code here. 
  $(this).click();
  // This line still calls the standard click event, in case the user needs to interact with the element that is being clicked on, but still avoids zooming in cases of double clicking.
})

Bu, normal dokunma işlevini devre dışı bırakır ve ardından standart bir tıklama olayını yeniden çağırır. Bu, mobil cihazın yakınlaştırmasını engeller, ancak aksi takdirde normal şekilde çalışır.

DÜZENLEME: Bu şimdi zaman içinde test edildi ve birkaç canlı uygulamada çalışıyor. % 100 çapraz tarayıcı ve platform gibi görünüyor. Click olayından önce özel davranış istemediğiniz sürece, yukarıdaki kod çoğu durumda bir kopyala-yapıştır çözümü olarak çalışmalıdır .

— Rockster 160
kaynak

basit ama harika bir cevap. meta etiketleri vb. değiştirmeye gerek yok

— benchpresser

2

bu tıklamaları devre dışı bırakır, bunun iyi bir çözüm olduğunu düşünmüyorum üzgünüm

— Pixelomo

6

Bunu yapmak için pointer-events: none

— JS'ye

1

Teşekkür ederiz, bu, tüm sayfada yakınlaştırmayı devre dışı bırakmadan artırma / azaltma düğmelerini kullanmak için mükemmel bir şekilde çalıştı.

— Ramón

1

Bunu doğru görürsem, bu, güvenilir olaylara ihtiyaç duyduğunuz belirli durumlarda başarısız olabilir (örneğin, tam ekranı veya diğer deneyleri tetikleyen tıklatma, kullanıcı / İS TARAFINDAN TETİKLENDİ anlamına gelen güvenilir olaylar olarak)

— Manuel Graf

29

Bazı insanlar bir cevabın altındaki yorumları okumadığı için sorumu doğru cevaplamak istedim. İşte burada:

(function($) {
  $.fn.nodoubletapzoom = function() {
      $(this).bind('touchstart', function preventZoom(e) {
        var t2 = e.timeStamp
          , t1 = $(this).data('lastTouch') || t2
          , dt = t2 - t1
          , fingers = e.originalEvent.touches.length;
        $(this).data('lastTouch', t2);
        if (!dt || dt > 500 || fingers > 1) return; // not double-tap

        e.preventDefault(); // double tap - prevent the zoom
        // also synthesize click events we just swallowed up
        $(this).trigger('click').trigger('click');
      });
  };
})(jQuery);

Bunu ben yazmadım, sadece değiştirdim. Yalnızca iOS sürümünü burada buldum: https://gist.github.com/2047491 (teşekkürler Kablam)

— Wouter Konecny
kaynak

1

Bu, en azından SIII'de (Android 4.0.4 ile) işe yaramıyor gibi görünüyor. Belgeye, gövdeye, pencereye *, zar olmadan bağlamayı denedim.

— Maksimum

Beni de denedi, safari / ipad, android chrome üzerinde çalışıyor, ancak android varsayılan tarayıcı ile değil

— Strae

2

jquery javascript değildir, bunun bir kütüphane olmadan nasıl yapılacağına dair bir örnek olması güzel olurdu

— Martijn Scheffer

Jquery olmayan bir sürüm aranıyor :-(

— Timo

Yine, jQuery javascript değildir ve köşeli gibi daha modern fikirlere dayanan sitelerde iyi çalışmadığı için teşvik edilmemelidir. soruyu oku

— Martijn Scheffer

16

Küresel olarak çift dokunuşla yakınlaştırmayı devre dışı bırakmak için CSS (herhangi bir öğede):

  * {
      touch-action: manipulation;
  }

manipülasyon

Kaydırma ve kıstırma hareketlerini etkinleştirin, ancak yakınlaştırmak için çift dokunma gibi standart olmayan ek hareketleri devre dışı bırakın.

Teşekkürler Ross, cevabım onun kapsamını genişletiyor: https://stackoverflow.com/a/53236027/9986657

— Oca
kaynak

1

Bu cevap olarak işaretlenmelidir. Sadece html ve body üzerine koymayı denedim ama iOS 13.2'de çalışmadı. Bu çalışıyor.

— R OMS

Bu, iOS 13'te kendi başına çalışmaz, ancak bu kodla bağlantılı olarak, React uygulaması için yakınlaştırmak için hafifçe dokunmayı engeller. document.getElementById('root').addEventListener('click', () => {})

— Sergei

apple devre dışı ios13'te yakınlaştırmak için dokunun, iOS13'te çalışmadığını nasıl söyleyebilirsiniz?

— oygen

15

Eğer bir sürümü gerekiyorsa jQuery olmadan çalışır , ben modifiye Wouter KONECNÝ yanıtını (ayrıca değiştirerek oluşturulan bu özünü tarafından Johan Sundström vanilya JavaScript kullanmak için).

function preventZoom(e) {
  var t2 = e.timeStamp;
  var t1 = e.currentTarget.dataset.lastTouch || t2;
  var dt = t2 - t1;
  var fingers = e.touches.length;
  e.currentTarget.dataset.lastTouch = t2;

  if (!dt || dt > 500 || fingers > 1) return; // not double-tap

  e.preventDefault();
  e.target.click();
}

Ardından, touchstartbu işlevi çağıran bir olay işleyicisi ekleyin :

myButton.addEventListener('touchstart', preventZoom);

— Evrim Perşembe
kaynak

3

parlak. sadece bunu çağırmak için addEventListener eklemem gerektiğini belirtmek istedim. myButton.addEventListener('touchstart', preventZoom);

— martin jakubik

11

Sen css özelliğini belirlesin touch-actioniçin nonebu diğer cevapta açıklandığı gibi https://stackoverflow.com/a/42288386/1128216

.disable-doubletap-to-zoom {
    touch-action: none;
}

— Jonathan Morales Vélez
kaynak

1

Bu işe yarıyor ... ama ya yakınlaştırmayı devre dışı bırakmak, ancak diğer dokunma olaylarını bırakmak istersem? Büyük bir masam var ve bu da kaydırmayı devre dışı bırakıyor.

— FrenkyB

2

Yalnızca çift dokunmalı yakınlaştırmadan kurtulmak istiyorsanız, değeri 'dokunma eylemi: manipüle et;' olarak ayarlamalısınız. Bu yine de kaydırma ve sıkıştırarak yakınlaştırmaya izin verecektir. Önemli Not: Bu ayrıca, çift dokunma yakınlaştırmayı uygulamak için sunulan tıklama gecikmesi tarayıcılarından kurtulmanıza da yardımcı olur. developer.mozilla.org/en-US/docs/Web/CSS/touch-action

— cschuff

Bu sınıf hangi HTML etiketine eklenmeli?

— Razvan Zamfir

Sanırım onu, kullanımın yakınlaştırmasını istemediğiniz herhangi bir öğeye ekleyebilirsiniz. Örneğin, benim durumumda kullanıcının sayfamın herhangi bir bölümünü yakınlaştırmasını istemediğim için bunu gövde etiketine ekledim.

— Jonathan Morales Vélez

2

* {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

Dokunmatik ekranları yakınlaştırmak için çift dokunmayı devre dışı bırakın. İnternet gezgini dahildir.

— Erçin Dedeoğlu
kaynak

1

Basit varsayılan davranışını önlemek click, dblclickya da touchendolaylar yaklaştırma işlevini devre dışı bırakacaktır.

Bu olaylardan birinde zaten bir geri aramanız varsa, bir event.preventDefault().

— William Grasel
kaynak

1

Bu benim için çalıştı. Bir düğme üzerinde kendi touchstart olayımı tanımlıyordum ve yakınlaştırma işlevini devre dışı bırakmak istedim.

— Rick Giuly

1

Vue.js kullanarak bu sorunu yaşayan benim gibi biri varsa, .prevent eklemek işe yarayacaktır:@click.prevent="someAction"

— Sølve Tornøe
kaynak

0

Bu, "gövde" içindeki öğelerde çift dokunarak yakınlaştırmayı önler, bu başka herhangi bir seçiciyle değiştirilebilir

$('body').bind('touchstart', function preventZoom(e){
            var t2 = e.timeStamp;
            var t1 = $(this).data('lastTouch') || t2;
            var dt = t2 - t1;
            var fingers = e.originalEvent.touches.length;
            $(this).data('lastTouch', t2);
            if (!dt || dt > 500 || fingers > 1){
                return; // not double-tap
            }
            e.preventDefault(); // double tap - prevent the zoom
            // also synthesize click events we just swallowed up
            $(e.target).trigger('click');

});

Ancak bu, tıklama etkinliğimin birden çok kez tıklandığında tetiklenmesini de engelledi, bu nedenle birden çok tıklamadaki etkinlikleri tetiklemek için başka bir etkinlik bağlamam gerekti

$('.selector').bind('touchstart click', preventZoom(e) {    
    e.stopPropagation(); //stops propagation
    if(e.type == "touchstart") {
      // Handle touchstart event.
    } else if(e.type == "click") {
      // Handle click event.
    }
});

Touchstart'ta yakınlaştırmayı önlemek ve bir tıklama tetiklemek için kodu ekledim.

$('.selector').bind('touchstart, click', function preventZoom(e){
            e.stopPropagation(); //stops propagation
            if(e.type == "touchstart") {
                // Handle touchstart event.
                var t2 = e.timeStamp;
                var t1 = $(this).data('lastTouch') || t2;
                var dt = t2 - t1;
                var fingers = e.originalEvent.touches.length;
                $(this).data('lastTouch', t2);


                if (!dt || dt > 500 || fingers > 1){
                    return; // not double-tap
                }

                e.preventDefault(); // double tap - prevent the zoom
                // also synthesize click events we just swallowed up
                $(e.target).trigger('click');

            } else if(e.type == "click") {
                // Handle click event.
               "Put your events for click and touchstart here"
            }

 });

— Dally S
kaynak

-1

<div>İçinde metin, kaydırıcılar ve düğmeler bulunan bir giriş kabı alanım olduğunu ve bunda yanlışlıkla çift tıklamaları engellemek istediğimi varsayıyorum <div>. Aşağıdakiler, giriş alanında yakınlaştırmayı engellemez ve alanımın dışında çift dokunma ve yakınlaştırmayla ilgili değildir <div>. Tarayıcı uygulamasına bağlı olarak farklılıklar vardır.

Ben sadece denedim.

(1) iOS'ta Safari ve Android'de Chrome için tercih edilen yöntemdir. Tam <div>olarak değil, en azından dokunmaları işleyen öğelerde çift dokunmayı devre dışı bıraktığı Samsung'daki İnternet uygulaması dışında çalışır . return falseİstisna textve rangegirdiler ile geri döner .

$('selector of <div> input area').on('touchend',disabledoubletap);

function disabledoubletap(ev) {

    var preventok=$(ev.target).is('input[type=text],input[type=range]');

    if(preventok==false) return false; 
}

(2) İsteğe bağlı olarak Android'deki (5.1, Samsung) yerleşik İnternet uygulaması için, aşağıdakilere çift dokunmayı <div>engeller, ancak aşağıdakilerin yakınlaştırılmasını engeller <div>:

$('selector of <div> input area').on('touchstart touchend',disabledoubletap);

(3) Android 5.1'de Chrome için, çift dokunmayı tamamen devre dışı bırakır, yakınlaştırmayı engellemez ve diğer tarayıcılarda çift dokunma konusunda hiçbir şey yapmaz. Çift dokunmanın engellenmesi <meta name="viewport" ...>rahatsız edicidir, çünkü <meta name="viewport" ...>iyi bir uygulama gibi görünmektedir.

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

— Peter
kaynak

-2

CSS dokunma olaylarını kullanma: hiçbiri Tüm dokunma olaylarını tamamen kaldırır. Birinin de bu sorunları olması durumunda bunu burada bırakmak, bu çözümü bulmam 2 saatimi aldı ve bu sadece bir satır css. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

— Ásgeir Frímannsson
kaynak

-4

İşte başlıyoruz

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

— emin değil
kaynak