300 ms dokunma gecikmesi, kayboldu

Jake Archibald
Jake Archibald

İki kez dokunma hareketi, metni yakınlaştırmak için yapılan bir hareket olduğundan yıllarca mobil tarayıcılar touchend ile click arasında 300-350 ms'lik bir gecikme uyguladı.

Android için Chrome'un ilk sürümünden itibaren, sıkıştırma yakınlaştırma özelliği de devre dışı bırakıldığında bu gecikme kaldırıldı. Ancak, iki parmak ucunu yakınlaştırma ya da uzaklaştırma önemli bir erişilebilirlik özelliğidir. Chrome 32 sürümünden itibaren (2014 yılında) mobil cihazlar için optimize edilmiş sitelerde bu gecikme ortadan kalkmıştır. Parmaklarınızı sıkıştırma hareketiyle yakınlaştırma kaldırılmıştır! Firefox ve IE/Edge, aynı şeyi kısa bir süre sonra da yaptı ve Mart 2016'da iOS 9.3'te de benzer bir düzeltme yapıldı.

Performans farkı muazzam!

Anında yanıt veren bir kullanıcı arayüzünün olması, kullanıcının duraklayıp yanıt beklemek yerine her bir düğmeye güvenle basabileceği anlamına gelir. İnsanların tepki sürelerinin ve web performansının etkisi hakkında daha fazla bilgiyi RAIL'e giriş bölümünde bulabilirsiniz.

300-350 ms dokunma gecikmesini kaldırmak için sayfanızın <head> bölümünde aşağıdakiler yeterlidir:

<meta name="viewport" content="width=device-width">

Bu, görüntü alanı genişliğini cihazla aynı olacak şekilde ayarlar ve genellikle mobil cihazlar için optimize edilmiş siteler için en iyi uygulamadır. Bu etiketle tarayıcılar, metni mobil cihazlarda okunabilir hale getirdiğinizi varsayar ve iki kez dokunarak yakınlaştırma özelliği daha hızlı tıklamaların lehine çıkar.

Herhangi bir nedenle bu değişikliği yapamazsanız sayfa genelinde veya belirli öğelerde aynı etkiyi elde etmek için touch-action: manipulation kullanabilirsiniz:

html {
    touch-action: manipulation;
}

Bu teknik Safari'de desteklenmediğinden görüntü alanı etiketi çok tercih edilir.

Yakınlaştırmak için iki kez dokunma özelliğini kaybetmek erişilebilirlikle ilgili bir sorun mu var?

Hayır. İki parmak ucuyla yakınlaştırma özelliği çalışmaya devam eder ve işletim sistemi özellikleri, bu hareketi güçleştiren kullanıcılara yöneliktir. Android'de bu sorunu büyütme hareketleri halleder. Bu tür araçlar tarayıcının dışında bile çalışır.

Eski tarayıcılar için durum nedir?

FastClick by FT Labs, tıklamaları daha hızlı tetiklemek için dokunma etkinliklerini kullanır ve iki kez dokunma hareketini kaldırır. Kaydırma ve dokunma işlemlerini ayırt etmek için parmağınızın touchstart ve touchend arasında hareket etme miktarına bakar.

Kaydırma gibi daha düşük düzeyli etkileşimler, event.preventDefault() olup olmadığını görmek için işleyiciyi çağırarak geciktirildiğinden, her şeye bir touchstart işleyici eklemenin performans üzerinde bir etkisi vardır. Neyse ki FastClick, tarayıcının 300 ms'lik gecikmeyi kaldırdığı durumlarda işleyici ayarlamaktan kaçınarak her ikisinden de en iyi şekilde yararlanmanızı sağlar.