Khi thiết kế của bạn xuất hiện trên thiết bị di động, hãy đảm bảo rằng các phần tử tương tác (chẳng hạn như nút hoặc đường liên kết) có kích thước đủ lớn và có đủ khoảng trống xung quanh. Điều này giúp người dùng dễ dàng nhấn mà không vô tình chồng lên các phần tử khác. Tính năng này mang lại lợi ích cho tất cả người dùng, nhưng đặc biệt hữu ích cho những người bị suy giảm chức năng vận động.
Kích thước đích chạm tối thiểu được đề xuất là khoảng 48 pixel độc lập với thiết bị trên một trang web có khung hiển thị thiết bị di động được thiết lập đúng cách. Ví dụ: mặc dù biểu tượng chỉ có chiều rộng và chiều cao là 24px, nhưng bạn có thể sử dụng thêm khoảng đệm để tăng kích thước đích chạm lên 48px. Vùng 48x48 pixel tương ứng với khoảng 9 mm, đây là kích thước của vùng đệm ngón tay của một người.
Các mục tiêu có thể nhấn cũng phải cách nhau khoảng 8 pixel theo chiều ngang và chiều dọc, để ngón tay của người dùng khi nhấn vào một mục tiêu có thể nhấn sẽ không vô tình chạm vào một mục tiêu có thể nhấn khác.
Kiểm thử đích chạm
Nếu mục tiêu của bạn là văn bản và bạn đã sử dụng các giá trị tương đối như em hoặc rem để định cỡ văn bản và mọi khoảng đệm, thì bạn có thể sử dụng các công cụ dành cho nhà phát triển để kiểm tra xem giá trị được tính của vùng đó có đủ lớn hay không.
Kiểm tra đường liên kết. Trong Công cụ cho nhà phát triển Chrome, hãy chuyển sang ngăn Đã tính toán, nơi bạn có thể kiểm tra các phần khác nhau của hộp và xem kích thước pixel mà chúng phân giải. Trong Công cụ cho nhà phát triển của Firefox, có một Bảng điều khiển bố cục. Trong bảng điều khiển đó, bạn sẽ thấy kích thước thực của phần tử được kiểm tra.
Phát hiện màn hình cảm ứng bằng truy vấn đa phương tiện
Thay vì kiểm thử kích thước khung hiển thị và đoán kích thước nhỏ có khả năng là điện thoại hoặc máy tính bảng, bạn có thể sử dụng các cách mạnh mẽ hơn để điều chỉnh thiết kế dựa trên khả năng thực tế của thiết bị.
Với truy vấn nội dung nghe nhìn, chúng ta có thể phát hiện xem phương thức nhập chính của người dùng có phải là màn hình cảm ứng (pointer) hay không và liệu có phương thức nhập nào được phát hiện là màn hình cảm ứng (any-pointer) hay không. Các tính năng pointer và any-pointer trả về fine hoặc coarse.
Con trỏ chính xác cho biết người dùng có chuột hoặc bàn di chuột. Điều này vẫn đúng nếu chuột được kết nối với điện thoại hoặc máy tính bảng qua Bluetooth. Con trỏ coarse cho biết màn hình cảm ứng, có thể là mọi kích thước hoặc loại thiết bị.
Nếu bạn thêm một truy vấn nội dung nghe nhìn để tăng mục tiêu chạm, hãy kiểm tra con trỏ thô để bạn có thể tăng mục tiêu nhấn cho tất cả người dùng màn hình cảm ứng, bất kể họ đang sử dụng thiết bị nào.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Tìm hiểu thêm về các tính năng của nội dung nghe nhìn tương tác, chẳng hạn như pointer, trong bài viết Thông tin cơ bản về thiết kế web đáp ứng.