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 thành phần tương tác như nút hoặc đường liên kết đủ lớn, và có đủ không gian xung quanh chúng, để dễ dàng nhấn mà không vô tình chồng chéo 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 những người bị suy giảm 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 đúng cách. Ví dụ: mặc dù một biểu tượng chỉ có thể có chiều rộng và chiều cao là 24px, bạn có thể sử dụng khoảng đệm bổ sung để tăng kích thước đích nhấn lên đến 48px. Vùng 48x48 pixel tương ứng với khoảng 9mm, quảng cáo này có kích thước bằng diện tích bàn di chuột của một người.
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.
Đích chạm cũng nên được đặt cách nhau khoảng 8 pixel. cả chiều ngang và chiều dọc, sao cho ngón tay của người dùng nhấn vào một đích nhấn không vô tình chạm vào đích 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 kích thước văn bản và bất kỳ khoảng đệm nào,
bạn có thể sử dụng Công cụ cho nhà phát triển để kiểm tra xem giá trị đã tính của khu vực đó có đủ lớn không.
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 để bạn có thể kiểm tra nhiều phần của hộp
và xem kích thước pixel mà chúng phân giải.
Trong Công cụ của Firefox, có một Layout Panel (Bảng điều khiển bố cục).
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 nội dung nghe nhìn để phát hiện việc sử dụng màn hình cảm ứng
Thay vì chỉ kiểm tra kích thước khung nhìn rồi đoán kích thước nhỏ có thể là điện thoại hoặc máy tính bảng, do đó, sử dụng màn hình cảm ứng, hiện có nhiều cách hiệu quả hơn để thích ứng thiết kế của mình dựa trên khả năng thực tế của thiết bị.
Một trong các tính năng đa phương tiện mà hiện nay chúng tôi có thể thử nghiệm
bằng truy vấn phương tiện
đầu vào chính của người dùng có phải là màn hình cảm ứng (pointer) không và
liệu bất kỳ đầu vào nào hiện được phát hiện có phải là màn hình cảm ứng hay không (any-pointer).
Các 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 biểu thị 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 điều chỉnh CSS trong một truy vấn đa phương tiện để tăng đích chạm, thử nghiệm 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. Khu vực nhấn lớn hơn sẽ được hiển thị 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 đáp ứng.