Trong nhiều năm, trình duyệt dành cho thiết bị di động đã áp dụng độ trễ từ 300 đến 350 mili giây giữa touchend và click trong khi chờ xem liệu đây có phải là thao tác nhấn đúp hay không, vì thao tác nhấn đúp là 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ị xoá 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 (vào năm 2014), độ trễ này đã biến mất đối với các trang web được tối ưu hoá cho thiết bị di động, mà không cần xoá tính năng thu phóng bằng cách chụm hai ngón tay! Firefox và IE/Edge cũng làm như vậy ngay sau đó và vào tháng 3 năm 2016, một bản sửa lỗi tương tự đã được phát hành trong iOS 9.3.
Sự khác biệt về hiệu suất là rất lớn!
Khi giao diện người dùng phản hồi tức thì, người dùng có thể tự tin nhấn nhanh vào từng nút thay vì tạm dừng và chờ phản hồi. 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 web trong phần giới thiệu về RAIL.
Để loại bỏ độ trễ nhấn từ 300 đến 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">
Thao tác này sẽ đặ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 hoá cho thiết bị di động. Với thẻ này, trình duyệt sẽ giả định rằng bạn đã làm cho văn bản dễ đọc trên thiết bị di động và tính năng nhấn đúp để thu phóng sẽ bị loại bỏ để ưu tiên các lượt nhấp nhanh hơn.
Nếu vì lý do nào đó mà 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 các 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 ưu tiên hơn.
Việc mất tính năng nhấn đúp để thu phóng có phải là vấn đề về hỗ trợ tiếp cận không?
Không. Tính năng thu phóng bằng cách chụm ngón tay vẫn hoạt động và các tính năng của hệ điều hành sẽ phục vụ những người dùng thấy khó thực hiện cử chỉ này. Trên Android, cử chỉ phóng to sẽ xử lý vấn đề này. Các công cụ như thế này thậm chí còn hoạt động bên ngoài trình duyệt.
Còn trình duyệt cũ thì sao?
FastClick 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. Phương thức này xem xét lượng ngón tay 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 thứ 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 như cuộn bị trì hoãn bằng cách gọi trình nghe để xem liệu trình nghe có event.preventDefault() hay không. Rất may, FastClick sẽ tránh thiết lập trình nghe trong trường hợp trình duyệt đã xoá độ trễ 300 mili giây, vì vậy, bạn sẽ có được cả hai tính năng tốt nhất!