Mục tiêu nhấn có kích thước không phù hợp

Đích nhấn là các vùng của trang web mà người dùng có thể tương tác trên thiết bị cảm ứng. Các nút, đường liên kết và thành phần biểu mẫu đều có đích nhấn.

Nhiều công cụ tìm kiếm xếp hạng các trang dựa trên mức độ thân thiện với thiết bị di động của chúng. Việc đảm bảo các mục tiêu nhấn đủ lớn và cách nhau đủ xa sẽ giúp trang của bạn thân thiện với thiết bị di động và dễ truy cập hơn.

Cách hoạt động kiểm tra mục tiêu nhấn của Lighthouse không thành công

Lighthouse sẽ gắn cờ các trang có mục tiêu nhấn đáp ứng cả hai điều kiện sau:

  • Mục tiêu nhỏ hơn 48 px x 48 px.
  • Ít nhất 25% vùng mục tiêu trong vòng 48 px kể từ tâm của mục tiêu trùng lặp với một mục tiêu khác.
Kiểm tra Lighthouse cho thấy các mục tiêu nhấn có kích thước không phù hợp

Khi quá trình kiểm tra không thành công, Lighthouse sẽ liệt kê kết quả trong một bảng có 3 cột:

Mục tiêu nhấn Mục tiêu nhấn có kích thước không phù hợp.
Kích thước Kích thước của hình chữ nhật bao quanh mục tiêu tính bằng pixel.
Mục tiêu trùng lặp Mục tiêu nhấn khác nào, nếu có, quá gần.

Cách chỉnh sửa mục tiêu nhấn

Tùy chọn 1: Tăng kích thước của các mục tiêu nhấn quá nhỏ. Các mục tiêu nhấn có kích thước 48 px x 48 px sẽ không bao giờ thất bại trong quá trình kiểm tra. Nếu bạn có các phần tử không nên xuất hiện lớn hơn (ví dụ: biểu tượng), hãy thử tăng thuộc tính padding:

Mục tiêu nhấn có kích thước phù hợp
Sử dụng padding để phóng to đích nhấn mà không thay đổi giao diện của một phần tử.

Cách 2: Tăng khoảng cách giữa các mục tiêu nhấn quá gần nhau bằng cách sử dụng các thuộc tính như margin. Bạn nên bắt đầu từ 8 px giữa các mục tiêu nhấn, nhưng không phải lúc nào cũng đủ khoảng cách để vượt qua quy trình kiểm tra, đặc biệt là đối với các mục tiêu rất nhỏ.

Tài nguyên