Penundaan ketuk 300 md, menghilang

Jake Archibald
Jake Archibald

Selama bertahun-tahun, browser seluler menerapkan penundaan 300-350 md antara touchend dan click selagi menunggu untuk melihat apakah ini akan menjadi ketuk dua kali atau bukan, karena mengetuk dua kali adalah gestur untuk memperbesar teks.

Sejak rilis pertama Chrome untuk Android, penundaan ini telah dihapus jika cubit-zoom juga dinonaktifkan. Namun, zoom cubit adalah fitur aksesibilitas yang penting. Mulai Chrome 32 (pada tahun 2014) penundaan ini hilang untuk situs yang dioptimalkan untuk seluler, tanpa menghapus zoom cubit. Firefox dan IE/Edge melakukan hal yang sama tak lama kemudian, dan pada Maret 2016 perbaikan serupa mendarat di iOS 9.3.

Perbedaan performanya sangat besar.

Memiliki UI yang merespons secara instan berarti pengguna dapat dengan cepat menekan setiap tombol dengan percaya diri, daripada berhenti sejenak dan menunggu respons. Cari tahu lebih lanjut tentang dampak waktu reaksi manusia dan performa web dalam pengantar RAIL kami.

Untuk menghapus penundaan ketuk 300-350 md, yang Anda perlukan adalah hal berikut di <head> halaman Anda:

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

Tindakan ini menyetel lebar area pandang agar sama dengan perangkat, dan umumnya merupakan praktik terbaik untuk situs yang dioptimalkan untuk seluler. Dengan tag ini, browser menganggap Anda telah membuat teks dapat dibaca di perangkat seluler, dan fitur ketuk dua kali untuk zoom akan diabaikan demi klik yang lebih cepat.

Jika karena alasan tertentu Anda tidak dapat melakukan perubahan ini, Anda dapat menggunakan touch-action: manipulation untuk mencapai efek yang sama baik di seluruh halaman atau pada elemen tertentu:

html {
    touch-action: manipulation;
}

Teknik ini tidak didukung di Safari, sehingga tag area pandang lebih disarankan.

Apakah kehilangan ketuk dua kali untuk memperbesar merupakan masalah aksesibilitas?

Tidak. Cubit zoom tetap berfungsi, dan fitur OS melayani pengguna yang merasa kesulitan dengan gestur ini. Di Android, gestur pembesaran akan menanganinya. Alat seperti ini bahkan bekerja di luar {i>browser<i}.

Bagaimana dengan browser lama?

FastClick dari FT Labs menggunakan peristiwa sentuh untuk memicu klik lebih cepat dan menghapus gestur ketuk dua kali. Fitur ini melihat seberapa sering jari Anda bergerak antara touchstart dan touchend untuk membedakan scroll dan ketukan.

Menambahkan pemroses touchstart ke semuanya memiliki dampak performa, karena interaksi tingkat yang lebih rendah seperti scroll tertunda dengan memanggil pemroses untuk melihat apakah pemroses tersebut event.preventDefault(). Untungnya, FastClick akan menghindari setelan pemroses apabila browser sudah menghilangkan penundaan 300 md, sehingga Anda bisa mendapatkan yang terbaik dari keduanya!