Mobil tarayıcılar, çift dokunma metni yakınlaştırma hareketi olduğundan, bunun çift dokunma olup olmadığını anlamak için uzun yıllar boyunca touchend ve click arasında 300-350 ms gecikme uyguluyordu.
Android için Chrome'un ilk sürümünden bu yana, iki parmak yakınlaştırma/uzaklaştırma özelliği de devre dışı bırakılırsa bu gecikme kaldırıldı. Ancak iki parmak yakınlaştırma/uzaklaştırma, önemli bir erişilebilirlik özelliğidir. Chrome 32'den (2014) itibaren mobil cihazlar için optimize edilmiş sitelerde bu gecikme ortadan kalktı. İki parmak yakınlaştırma/uzaklaştırma özelliği de kaldırılmadı. Firefox ve IE/Edge kısa süre sonra aynısını yaptı. Mart 2016'da iOS 9.3'te benzer bir düzeltme yayınlandı.
Performans farkı çok büyük.
Anında yanıt veren bir kullanıcı arayüzüne sahip olmak, kullanıcının duraklayıp yanıt beklemek yerine her düğmeye güvenle hızlıca basabileceği anlamına gelir. Kullanıcı tepki sürelerinin ve web performansının etkisi hakkında daha fazla bilgiyi RAIL'e giriş makalemizde bulabilirsiniz.
300-350 ms dokunma gecikmesini kaldırmak için sayfanızı <head> olarak ayarlamak 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ş sitelerde en iyi uygulama olarak kabul edilir. Bu etiketle tarayıcılar, metni mobil cihazlarda okunabilir hale getirdiğinizi varsayar ve daha hızlı tıklamalar için yakınlaştırmak üzere çift dokunma özelliğini kaldırır.
Herhangi bir nedenle bu değişikliği yapamıyorsanız sayfa genelinde veya belirli öğelerde aynı etkiyi elde etmek için touch-action: manipulation öğesini kullanabilirsiniz:
html {
touch-action: manipulation;
}
Bu teknik Safari'de desteklenmediği için ekran görüntüsü etiketi tercih edilir.
Yakınlaştırmak için iki kez dokunma özelliğinin kaldırılması erişilebilirlik açısından bir sorun mu?
Hayır. İki parmak yakınlaştırma özelliği çalışmaya devam eder ve işletim sistemi özellikleri, bu hareketi zor bulan kullanıcılara hitap eder. Android'de bu işlem büyütme hareketleriyle yapılır. Bu tür araçlar tarayıcı dışında da çalışır.
Eski tarayıcılarda durum nedir?
FT Labs tarafından geliştirilen FastClick, tıklamaları daha hızlı tetiklemek için dokunma etkinliklerini kullanır ve çift dokunma hareketini kaldırır. Kaydırma ve dokunma işlemlerini ayırt etmek için parmağınızın touchstart ile touchend arasında ne kadar hareket ettiğini inceler.
Her şeye bir touchstart dinleyici eklemek performansı etkiler. Bunun nedeni, kaydırma gibi alt düzey etkileşimlerin, dinleyicinin event.preventDefault() olup olmadığını kontrol etmek için çağrılmasıyla gecikmesidir. Neyse ki FastClick, tarayıcının zaten 300 ms gecikmeyi kaldırdığı durumlarda dinleyici ayarlamayacaktır. Böylece ikisinin de en iyisini elde edersiniz.