Mobil tarayıcılar uzun yıllar boyunca touchend ile click arasında 300-350 ms gecikme uyguluyordu. Bu süre zarfında bunun iki kez dokunma hareketinin olup olmayacağını görmek için bekliyorlardı. Bunun nedeni, iki kez dokunma hareketinin metni yakınlaştırma hareketiydi.
Android için Chrome'un ilk sürümünden beri, iki parmak ucuyla yakınlaştırma özelliğinin devre dışı bırakılması durumunda bu gecikme ortadan kalkmıştır. İki parmak ucunu yakınlaştırma ya da uzaklaştırma özelliği önemli bir erişilebilirlik özelliğidir. Chrome 32'den itibaren (2014'te) mobil cihazlar için optimize edilmiş siteler için bu gecikme ortadan kalktı. Sıkıştırılmış yakınlaştırma kaldırıldı! Firefox ve IE/Edge de aynısını kısa bir süre sonra yaptı ve Mart 2016'da iOS 9.3'te benzer bir düzeltme yapıldı.
Performans farkı çok büyük!
Anında yanıt veren bir kullanıcı arayüzünün olması, kullanıcının duraklatıp yanıt beklemek yerine her bir düğmeye güvenle basabileceği anlamına gelir. İnsan 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'lik dokunma gecikmesini kaldırmak için sayfanızın <head> bölümünde aşağıdakileri yapmanız yeterlidir:
<meta name="viewport" content="width=device-width">
Bu, görüntü alanı genişliğini cihazla aynı olacak şekilde ayarlar ve mobil cihazlar için optimize edilmiş siteler için genellikle en iyi uygulamadır. Bu etiketle tarayıcılar, metni mobil cihazlarda okunabilir hale getirdiğinizi ve yakınlaştırmak için iki kez dokunma özelliğinin yerini daha hızlı tıklamalara döndürdüğünü varsayar.
Herhangi bir nedenle bu değişikliği yapamıyorsanız aynı etkiyi sayfa genelinde veya belirli öğelerde elde etmek için touch-action: manipulation kullanabilirsiniz:
html {
touch-action: manipulation;
}
Bu teknik Safari'de desteklenmediğinden görüntü alanı etiketi tercih edilir.
Yakınlaştırmak için iki kez dokunmayı kaybetmek bir erişilebilirlik sorunu mu?
Hayır. İki parmak ucuyla yakınlaştırma özelliği çalışmaya devam etmektedir ve işletim sistemi özellikleri bu hareketi zor bulan kullanıcılar için uygundur. Android'de büyütme hareketleri bu sorunla ilgilenir. Bunun gibi araçlar tarayıcının dışında da çalışır.
Eski tarayıcılara ne olacak?
FT Labs'in FastClick özelliği, 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 birbirinden ayırt etmek için parmağınızı touchstart ile touchend arasında hareket ettirdiğiniz miktara bakar.
Her şeye bir touchstart işleyici eklemek performansı etkiler. Çünkü kaydırma gibi alt düzey etkileşimler, event.preventDefault() olup olmadığını görmek için işleyiciyi çağırarak gecikir. Neyse ki FastClick, tarayıcının 300 ms gecikmeyi kaldırdığı durumlarda dinleyici ayarlamaktan kaçınarak her ikisinden de en iyi şekilde yararlanırsınız.