Softonic

Thiết bị kiểm thử tương thích di động

Bước 1 / 2
Tiếp theo

Hãy nhập một địa chỉ URL; công cụ kiểm thử sẽ tải nội dung vào khung hiển thị điện thoại mô phỏng (kích thước mặc định là 375×812 điểm ảnh, tương ứng với kích thước màn hình iPhone), kiểm tra các lỗi phổ biến về khả năng đọc trên thiết bị di động mà bài kiểm tra Mobile-Friendly của Google từng sử dụng để phát hiện trước khi bị ngừng hoạt động, và trả về danh sách các lỗi có thể khắc phục: thiếu thẻ meta viewport, văn bản nhỏ hơn 12px, đối tượng nhấp gần quá 48×48px, trượt ngang, sử dụng Flash hoặc plugin không hỗ trợ, và nội dung rộng hơn kích thước khung hiển thị.

Cách thức thực hiện bài kiểm tra

  1. 1

    Nhập địa chỉ URL

    Địa chỉ URL đầy đủ kèm giao thức. Chỉ dành cho các trang công cộng.

  2. 2

    Trang được hiển thị trong khung nhìn kích thước điện thoại

    Theo mặc định là 375×812, có thể cấu hình được.

  3. 3

    Các cuộc kiểm tra tự động đang được thực hiện.

    Meta của khung hình, kích thước văn bản, khoảng cách giữa các mục đích chạm, hiện tượng tràn màn hình, plugin.

  4. 4

    Xem trước và báo cáo

    Ảnh chụp màn hình giao diện điện thoại đã hiển thị cùng danh sách các vấn đề cụ thể.

Những điều mà người kiểm thử cần kiểm tra

Cấu hình khung nhìn

– Có mẫu <meta name="viewport" content="width=device-width, initial-scale=1"> không? Nếu không có mẫu này, các trình duyệt di động sẽ hiển thị như thể điện thoại có kích thước màn hình máy tính để bàn và tự động thu nhỏ kích thước để phù hợp, khiến văn bản hiển thị quá nhỏ.

Kích thước văn bản

– Mọi văn bản có kích thước nhỏ hơn 12px đều bị đánh dấu – rất khó đọc trên điện thoại nếu không sử dụng chức năng phóng đại bằng thao tác vuốt vào màn hình. – Nhiều hướng dẫn về phong cách viết khuyến nghị kích thước chữ chính tối thiểu là 16px. Các chú thích có kích thước rất nhỏ là được chấp nhận; ngược lại, văn bản chính với kích thước 11px thì không phù hợp.

Kích thước mục tiêu của nút nhấn

– Các nút bấm, liên kết và thành phần điều khiển trong biểu mẫu phải có kích thước tối thiểu là 48×48 px (theo hướng dẫn về khả năng truy cập di động của Google/W3C). Các mục tiêu nhỏ hơn khó đánh trúng chính xác bằng ngón cái và sẽ bị đánh dấu.

Khoảng cách giữa các mục đích nhắm mục tiêu

– Các mục tiêu nằm gần hơn 8px so với các mục tiêu liền kề sẽ gây ra các lần nhấn nhầm; những trường hợp này được đánh dấu riêng biệt.

Cuộn ngang

Nội dung vượt quá kích thước khung hiển thị sẽ buộc người dùng phải trượt ngang – điều này làm giảm trải nghiệm người dùng trên thiết bị di động. Tình trạng này thường xảy ra do hình ảnh không có mã định dạng max-width: 100% hoặc bảng không thể tự điều chỉnh chiều rộng khi hiển thị.

Các plugin không được hỗ trợ

  • Flash, Silverlight và ActiveX không hoạt động trên điện thoại. Một số trang web cũ đôi khi vẫn sử dụng chúng.

Tải phông chữ

Các phông chữ web có kích thước rất lớn, gây trễ hiển thị trong vài giây, sẽ được đánh dấu.

Vì sao điều này vẫn rất quan trọng

Google đã ngừng triển khai bài kiểm tra độc lập về tính thân thiện với thiết bị di động vào tháng 12 năm 2023, tuy nhiên tính thân thiện với thiết bị di động vẫn là một yếu tố đánh giá trực tiếp thông qua các chỉ số Core Web Vitals và các chỉ số trải nghiệm trang web. Chế độ lập chỉ mục ưu tiên thiết bị di động có nghĩa là Google sẽ thu thập dữ liệu từ trang web của bạn như một thiết bị điện thoại; những điểm yếu khi dùng trên thiết bị di động cũng sẽ được phản ánh trong kết quả xếp hạng trên máy tính để bàn.

Các giải pháp khắc phục điển hình

  • Thêm thông tin meta về vùng hiển thị vào các mã <head> và <meta name="viewport" content="width=device-width, initial-scale=1">.
  • CSS thích ứng thông qua các truy vấn media: @media (max-width: 768px) { ... }.
  • Flexbox và Grid thay vì các bố cục có chiều rộng cố định.
  • Chọn hình ảnh max-width: 100%; height: auto để các hình ảnh thu nhỏ theo kích thước cửa sổ hiển thị.
  • Thiết lập các bảng có thể cuộn trên màn hình nhỏ: sử dụng mã <div style="overflow-x: auto"> để định dạng cuộn.
  • Hãy sử dụng rem hoặc em để điều chỉnh kích thước văn bản nhằm đảm bảo tính năng tự động điều chỉnh theo sở thích người dùng hoạt động hiệu quả.

Những điều mà người kiểm thử không phát hiện được

– Hiệu năng trên thiết bị thực tế: Các điện thoại Android tầm thấp sử dụng kết nối 3G thường gặp tình trạng trễ mà công cụ kiểm thử này không mô phỏng được; hãy sử dụng Lighthouse để đánh giá hiệu năng. – Các tương tác bằng chạm: Những danh sách thả xuống chỉ hoạt động khi di chuột và bị đóng lại khi chạm cần được kiểm thử thủ công trên thiết bị thực tế. – Tính khả dụng vượt ra ngoài phạm vi thiết kế dành cho thiết bị di động: Sử dụng các công cụ hỗ trợ tính khả dụng chuyên biệt như hiệu ứng tương phản, hỗ trợ trình đọc màn hình và điều hướng bằng bàn phím.

  • Các lỗi JavaScript trên các trình duyệt dành riêng cho thiết bị di động: Safari trên hệ điều hành iOS đôi khi hoạt động khác biệt so với các phiên bản WebKit khác.

Câu hỏi thường gặp

Các kiểm tra tương tự nhưng cách triển khai khác nhau. Google đã ngừng cung cấp công cụ này cho người dùng vào cuối năm 2023. Công cụ kiểm thử này thực hiện cùng bộ các kiểm tra tiêu chuẩn mà Google từng sử dụng, trên phiên bản trang web mà trình duyệt không có phần đầu trang (headless browser) tải về.

Đúng vậy – từ năm 2020, Google đã áp dụng nguyên tắc ưu tiên thiết bị di động trong việc lập chỉ mục, nghĩa là phiên bản hiển thị trên thiết bị di động sẽ là cơ sở chính để xác định thứ hạng. Các vấn đề liên quan đến thiết bị di động có thể ảnh hưởng tiêu cực đến thứ hạng ngay cả khi người dùng tìm kiếm từ máy tính để bàn.

Không. Bộ kiểm thử chỉ truy xuất các URL có thể truy cập công khai. Đối với môi trường phát triển được bảo vệ, hãy thực hiện kiểm thử tại máy tính cá nhân bằng chế độ mô phỏng thiết bị của Chrome DevTools.

Kích thước mặc định là 375×812 (iPhone 12/13/14); có thể cấu hình thành 390×844 (iPhone 14 Pro), 360×640 (Android thông thường) hoặc 412×915 (Pixel 7).

Thông thường mất từ 5 đến 15 giây, tùy thuộc vào độ phức tạp của trang. Các trang có nội dung dày đặc và chứa nhiều mã nguồn sẽ tốn thời gian lâu hơn; công cụ kiểm thử sẽ chờ đến khi quá trình tải hoàn tất cùng với một khoảng thời gian nghỉ ngắn trước khi bắt đầu thu thập dữ liệu.

Công cụ liên quan

Trình kiểm tra độ dài mô tả siêu dữ liệu

Đo mô tả meta theo ký tự và pixel ước tính, so sánh các mốc biên tập và xem bố cục minh họa trên máy tính lẫn thiết bị di động.

Trình trích liên kết bên ngoài

Dán mã HTML thô, tùy chọn nhập URL gốc và nhận danh sách sạch, không trùng lặp tất cả liên kết ngoài http/https trong mã để phục vụ kiểm toán liên kết và đánh giá SEO.

Trình mô phỏng kết quả Google

Xem snippet gần đúng theo kiểu Google với giới hạn ký tự cho điện thoại và máy tính. Bản nháp chỉ ở trong phiên trình duyệt này.

Trình kiểm tra header bảo mật HTTP

Dán header phản hồi HTTP và kiểm tra cục bộ HSTS, CSP, clickjacking, MIME, referrer cùng chính sách cross-origin.

Trình kiểm tra sơ đồ trang web XML

Kiểm tra XML của sơ đồ trang web trong trình duyệt để tìm lỗi phân tích, vị trí còn thiếu, URL trùng lặp và giá trị trường phổ biến.

Bộ đếm tần suất từ

Tìm các từ xuất hiện lặp lại nhiều nhất trong văn bản, kèm số lần và phần trăm mật độ. Hữu ích cho biên tập, kiểm tra SEO và audit nội dung.

Công cụ này có phiên bản bằng các ngôn ngữ khác