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 mengetahui apakah ini akan berupa ketuk dua kali atau tidak, karena ketuk 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 tidak ada 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, Anda hanya perlu melakukan hal berikut di <head> halaman:

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

Hal ini akan menetapkan lebar area pandang 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 memperbesar tidak mendukung klik yang lebih cepat.

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

html {
    touch-action: manipulation;
}

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

Apakah kehilangan ketuk dua kali untuk memperbesar merupakan masalah aksesibilitas?

Tidak. Zoom tetap berfungsi, dan fitur OS melayani pengguna yang merasa kesulitan dengan gestur ini. Di Android, Anda dapat menggunakan gestur pembesaran. Alat seperti ini bahkan bekerja di luar {i>browser<i}.

Bagaimana dengan browser lama?

FastClick by FT Labs menggunakan peristiwa sentuh untuk memicu klik lebih cepat dan menghapus gestur ketuk dua kali. Mode ini melihat frekuensi gerakan jari Anda antara touchstart dan touchend untuk membedakan scroll dan ketukan.

Menambahkan pemroses touchstart ke semua hal akan berdampak pada performa, karena interaksi tingkat yang lebih rendah seperti scroll tertunda dengan memanggil pemroses untuk melihat apakah interaksi tersebut event.preventDefault(). Untungnya, FastClick akan menghindari penyetelan pemroses jika browser sudah menghilangkan penundaan 300 md, sehingga Anda mendapatkan yang terbaik dari keduanya.