Khi thiết kế của bạn hiển thị trên thiết bị di động, bạn nên đảm bảo rằng các phần tử tương tác như nút hoặc đường liên kết đủ lớn và có đủ khoảng trống xung quanh để dễ nhấn mà không vô tình chồng lên các phần tử khác. Điều 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 bất cứ ai 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 trang web có khung nhìn trên thiết bị di động được thiết lập phù hợp. Ví dụ: mặc dù biểu tượng chỉ có thể có chiều rộng và chiều cao là 24px, nhưng bạn có thể sử dụng khoảng đệm bổ sung để tăng kích thước đích nhấn lên tối đa 48px. Khu vực 48 x 48 pixel tương ứng với khoảng 9 mm, bằng kích thước của vùng bàn phím di chuyển ngón tay.
Trong bản minh hoạ, tôi đã thêm khoảng đệm vào tất cả các đường liên kết để đảm bảo chúng đáp ứng kích thước tối thiểu.
Các đích chạm cũng phải cách nhau khoảng 8 pixel, cả chiều ngang và chiều dọc để thao tác nhấn ngón tay của người dùng trên một mục tiêu nhấn không vô tình chạm vào mục tiêu nhấn khác.
Kiểm tra đí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 để đặt kích thước văn bản và bất kỳ khoảng đệm nào, thì bạn có thể sử dụng Công cụ cho nhà phát triển để kiểm tra nhằm đảm bảo rằng giá trị tính toán của khu vực đó đủ lớn.
Trong ví dụ bên dưới, tôi đang sử dụng em cho văn bản và khoảng đệm.
Kiểm tra a của đường liên kết và trong Công cụ của Chrome cho nhà phát triển, hãy chuyển sang Ngăn tính toán. Tại đây, bạn có thể kiểm tra các phần khác nhau của hộp và xem chúng giải quyết được kích thước pixel nào.
Trong Công cụ của Firefox cho nhà phát triển, có một Bảng điều khiển bố cục (Layout Panel).
Trong bảng điều khiển đó, bạn sẽ có kích thước thực tế của phần tử được kiểm tra.
Sử dụng truy vấn phương tiện để phát hiện việc sử dụng màn hình cảm ứng
Thay vì chỉ kiểm thử các kích thước khung nhìn, sau đó đoán rằng các kích thước nhỏ có khả năng là điện thoại hoặc máy tính bảng (sử dụng màn hình cảm ứng), thì giờ đây, có nhiều cách hiệu quả hơn để điều chỉnh thiết kế của bạn dựa trên các chức năng thực tế của thiết bị.
Một trong những tính năng nội dung đa phương tiện mà chúng ta hiện có thể kiểm thử bằng truy vấn nội dung đa phương tiện là liệu đầu vào 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 bất kỳ đầu vào nào được phát hiện có phải là màn hình cảm ứng (any-pointer). Tính năng pointer và any-pointer sẽ trả về fine hoặc coarse.
Con trỏ nhỏ là người sử dụng chuột hoặc bàn di chuột, ngay cả khi chuột đó được kết nối với điện thoại qua Bluetooth.
Con trỏ coarse cho biết màn hình cảm ứng, có thể là thiết bị di động nhưng cũng có thể là màn hình máy tính xách tay hoặc máy tính bảng lớn.
Nếu bạn đang điều chỉnh CSS trong một truy vấn nội dung đa phương tiện để tăng đích chạm, thì việc kiểm thử con trỏ thô cho phép bạn tăng mục tiêu nhấn cho tất cả người dùng màn hình cảm ứng. Thao tác này giúp khu vực nhấn lớn hơn cho dù thiết bị là điện thoại hay thiết bị lớn hơn.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Bạn có thể 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ư con trỏ trong bài viết Kiến thức cơ bản về thiết kế web thích ứng.