Selama bertahun-tahun, browser seluler menerapkan penundaan 300-350 md antara touchend
dan click
saat menunggu untuk melihat apakah ini akan menjadi ketuk dua kali atau tidak, karena ketuk dua kali adalah gestur untuk memperbesar teks.
Sejak rilis pertama Chrome untuk Android, penundaan ini dihapus jika zoom cubit juga dinonaktifkan. Namun, cubit untuk memperbesar adalah fitur aksesibilitas yang penting. Mulai Chrome 32 (pada tahun 2014), penundaan ini tidak ada lagi untuk situs yang dioptimalkan untuk perangkat seluler, tanpa menghapus fitur cubit untuk memperbesar. Firefox dan IE/Edge melakukan hal yang sama tak lama kemudian, dan pada Maret 2016, perbaikan serupa diluncurkan di iOS 9.3.
Perbedaan performanya sangat besar.
UI yang merespons secara instan berarti pengguna dapat menekan setiap tombol dengan cepat dan yakin, bukan menjeda dan menunggu respons. Cari tahu lebih lanjut dampak waktu reaksi manusia dan performa web di pengantar RAIL.
Untuk menghapus penundaan ketuk 300-350 md, Anda hanya memerlukan hal berikut di <head>
halaman:
<meta name="viewport" content="width=device-width">
Tindakan ini akan menetapkan lebar area tampilan 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 dihapus demi 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 pandang lebih disarankan.
Apakah kehilangan fitur ketuk dua kali untuk zoom merupakan masalah aksesibilitas?
Tidak. Zoom cubit akan terus berfungsi, dan fitur OS akan melayani pengguna yang merasa kesulitan dengan gestur ini. Di Android, gestur perbesaran akan menanganinya. Alat seperti ini bahkan berfungsi di luar browser.
Bagaimana dengan browser lama?
FastClick oleh FT Labs menggunakan peristiwa sentuh untuk memicu klik lebih cepat dan menghapus gestur ketuk dua kali. Fungsi ini melihat jumlah jari Anda yang bergerak antara touchstart
dan touchend
untuk membedakan scroll dan ketukan.
Menambahkan pemroses touchstart
ke semuanya akan berdampak pada performa, karena interaksi tingkat rendah seperti scroll tertunda dengan memanggil pemroses untuk melihat apakah event.preventDefault()
. Untungnya, FastClick akan menghindari penyetelan pemroses jika browser sudah menghapus penundaan 300 md, sehingga Anda mendapatkan yang terbaik dari keduanya.