Trong nhiều năm, các trình duyệt trên thiết bị di động đã áp dụng độ trễ 300-350 mili giây từ touchend đến click trong khi họ chờ xem liệu đây có phải là thao tác nhấn đúp hay không, vì nhấn đúp là một cử chỉ để phóng to văn bản.
Kể từ bản phát hành đầu tiên của Chrome dành cho Android, độ trễ này đã bị loại bỏ nếu tính năng chụm-thu phóng cũng bị tắt. Tuy nhiên, tính năng thu phóng bằng cử chỉ chụm là một tính năng hỗ trợ tiếp cận quan trọng. Kể từ Chrome 32 (trở lại năm 2014), độ trễ này đối với các trang web được tối ưu hóa cho thiết bị di động mà không loại bỏ việc chụm-thu phóng! Firefox và IE/Edge cũng làm tương tự ngay sau đó và vào tháng 3 năm 2016, một bản sửa lỗi tương tự đã hạ cánh trên iOS 9.3.
Sự khác biệt về hiệu suất là rất lớn!
Việc có giao diện người dùng phản hồi tức thì sẽ giúp người dùng tự tin nhấn nhanh từng nút, thay vì phải tạm dừng và chờ phản hồi. Hãy tìm hiểu thêm về tác động của thời gian phản ứng của con người và hiệu suất của trang web trong phần giới thiệu về RAIL.
Để loại bỏ độ trễ nhấn 300 – 350 mili giây, bạn chỉ cần làm như sau trong <head> của trang:
<meta name="viewport" content="width=device-width">
Điều này đặt chiều rộng khung nhìn giống với thiết bị và thường là phương pháp hay nhất cho các trang web được tối ưu hóa cho thiết bị di động. Với thẻ này, trình duyệt sẽ giả định rằng bạn đã đọc được văn bản trên thiết bị di động và tính năng nhấn đúp để thu phóng bị bỏ qua để hỗ trợ lượt nhấp nhanh hơn.
Nếu vì lý do nào đó khiến bạn không thể thực hiện thay đổi này, bạn có thể sử dụng touch-action: manipulation để đạt được hiệu quả tương tự trên trang hoặc trên một số phần tử cụ thể:
html {
touch-action: manipulation;
}
Kỹ thuật này không được hỗ trợ trong Safari, vì vậy thẻ khung nhìn được rất ưa thích.
Việc mất thao tác nhấn đúp để thu phóng có phải là mối lo ngại về khả năng hỗ trợ tiếp cận không?
Không. Tính năng thu phóng bằng cách chụm/duỗi ngón tay vẫn tiếp tục hoạt động và các tính năng của hệ điều hành sẽ dành cho những người dùng gặp khó khăn với cử chỉ này. Trên Android, cử chỉ thu phóng sẽ xử lý việc này. Các công cụ như thế này thậm chí hoạt động bên ngoài trình duyệt.
Còn các trình duyệt cũ thì sao?
QuickClick của FT Labs sử dụng các sự kiện chạm để kích hoạt lượt nhấp nhanh hơn và loại bỏ cử chỉ nhấn đúp. Chỉ số này cho biết số lượng ngón tay bạn đã di chuyển giữa touchstart và touchend để phân biệt thao tác cuộn và nhấn.
Việc thêm trình nghe touchstart vào mọi nội dung sẽ ảnh hưởng đến hiệu suất, vì các hoạt động tương tác cấp thấp hơn, chẳng hạn như cuộn, sẽ bị trì hoãn bằng cách gọi trình nghe để xem có event.preventDefault() hay không. Rất may là FastClick sẽ tránh đặt trình nghe trong trường hợp trình duyệt đã loại bỏ độ trễ 300 mili giây, nhờ đó bạn có thể tận dụng tối đa cả hai điều này!