STATUS IS UPWIKI TỐI ƯU HÓA WEBSITE
06Kích hoạt
Thiết kế & UX / Kích hoạt

Danh sách kiểm tra Thiết kế Web Đáp ứng cho Thiết bị Thực

Một quy trình QA thực tế để chứng minh rằng các trang quan trọng vẫn đọc được, sử dụng được và nhanh trên các màn hình, phương thức nhập và điều kiện mạng thực tế.

Danh sách kiểm tra Thiết kế Web Đáp ứng cho Thiết bị Thực — HƯỚNG DẪN TRỰC QUAN
ĐỌC
8 phút
NGUỒN
6
TÁI XÁC NHẬN
2027-03-27
đã rà soát
Người rà soát Khả năng Truy cập và Hiệu năng Front-End
CÂU TRẢ LỜI NGẮN GỌN

Bắt đầu từ quyết định.

Xem thiết kế đáp ứng như QA trước phát hành, không chỉ là một bộ ảnh chụp màn hình điện thoại. Kiểm thử các hành trình khách hàng quan trọng ở chiều rộng hẹp, trung bình và rộng; ở các hướng phù hợp; với đầu vào chạm, bàn phím và con trỏ; và trên một tập nhỏ các thiết bị thực. Một trang được coi là đạt khi người dùng có thể hoàn thành nhiệm vụ mà không phải cuộn ngang ngoài ý muốn, thiếu thông tin hoặc phải dùng thủ thuật riêng cho thiết bị.

Dùng giả lập trình duyệt để tìm nhanh các ranh giới bố cục, rồi xác nhận các đường dẫn quan trọng trên phần cứng vật lý. Chrome nói Device Mode là một xấp xỉ, không phải mã chạy trên thiết bị di động. Ghi lại mỗi lỗi với lộ trình, viewport hoặc thiết bị, hướng, phương thức nhập, kết quả mong đợi, kết quả thực tế và bằng chứng an toàn về quyền riêng tư. Sửa quy tắc chung khi có thể, rồi kiểm tra lại trường hợp ban đầu và các chiều rộng lân cận.

HƯỚNG DẪN TRỰC QUAN

Nhìn công việc như một hệ thống.

Dùng sơ đồ này để nối các quyết định trong bài trước khi hành động theo từng thủ thuật.

SIUKích hoạt
01Xây dựng phạm vi bao phủ quanh các nhiệm vụ của khách hàng
02Chứng minh việc chạy lại bố cục, khả năng đọc và phóng to
03Đặt áp lực lên nội dung và biểu mẫu
04Thực thi mọi đường dẫn nhập liệu
01

Xây dựng phạm vi bao phủ quanh các nhiệm vụ của khách hàng

Liệt kê các lộ trình và kết quả tạo giá trị: tìm dịch vụ, tìm kiếm, thêm mục, đặt chỗ, đăng nhập, yêu cầu trợ giúp hoặc thanh toán. Với mỗi trường hợp, đặt tên các thành phần có thể thay đổi hình dạng hoặc bị lỗi: điều hướng, bộ lọc, thẻ, bảng, hình ảnh, banner, biểu mẫu, ngăn kéo (drawer) và widget nhúng. Kiểm thử các chiều rộng nơi nội dung của bạn trở nên bị bó hẹp, không chỉ là danh mục các mẫu điện thoại hiện có. Kiểm thử ngay dưới, tại và ngay trên mỗi điểm ngắt (breakpoint).

Dùng một tập bao phủ nhỏ

Bao gồm các điện thoại hẹp và cỡ trung, một chiều rộng giống máy tính bảng, laptop, desktop rộng và chế độ ngang khi nó thay đổi nhiệm vụ.

Kiểm thử các trạng thái thực

Dùng tiêu đề dài, kết quả rỗng, lỗi xác thực, huy hiệu giá, địa chỉ đầy đủ và nhãn dài khi các trạng thái đó tồn tại.

02

Chứng minh việc chạy lại bố cục, khả năng đọc và phóng to

Xác nhận trang có cài đặt viewport phù hợp, sau đó kiểm tra cuộn ngang ở cấp trang. Hình ảnh cố định, trường rộng, margin âm, bảng điều khiển ngoài màn hình và banner là những nguyên nhân phổ biến. Tiêu chí Reflow của WCAG 2.1 mô tả nội dung cuộn dọc ở chiều rộng tương đương 320 CSS pixels, bao gồm viewport 1280-pixel ở mức phóng to 400%. Nếu tiêu chí đó trong phạm vi, hãy kiểm thử kịch bản phóng to thực tế. Một bản đồ, video hoặc bảng dữ liệu có thể cần bố cục hai chiều, nhưng giữ cuộn trong thành phần và để trang xung quanh chạy lại bố cục.

Kiểm tra mọi cạnh

Kiểm tra header, nội dung chính, footer, thanh cố định (sticky), hộp thoại và tóm tắt lỗi ở mọi ranh giới đã kiểm thử.

Giữ lại nội dung bắt buộc

Tổ chức lại thông tin cho màn hình hẹp; không được âm thầm loại bỏ yêu cầu, chi tiết giá hoặc đường dẫn trợ giúp.

03

Đặt áp lực lên nội dung và biểu mẫu

Các thao tác nội dung có thể gây lỗi đáp ứng mà không cần phát hành CSS. Kiểm thử tiêu đề dài nhất được phê duyệt, vài huy hiệu, một hình ảnh bị thiếu, bộ lọc được chọn, một thông báo pháp lý lớn và một trường được trình duyệt điền. Khi các cột xếp chồng, xác nhận thứ tự đọc và thứ tự phím vẫn hợp lý. Hoàn thành biểu mẫu thực trên thiết bị nhỏ: mở điều khiển, sửa lỗi và gửi. Kiểm thử widget bên thứ ba trên trang giống như bản sản xuất vì container, trạng thái đồng ý, phông chữ và kiểu của chúng có thể thay đổi kết quả.

Dùng dữ liệu kiểm thử an toàn

Phản ánh các độ dài và kết hợp có khả năng tối đa, nhưng không bao gồm dữ liệu khách hàng hoặc thanh toán trong bằng chứng QA.

Kiểm tra các lớp phủ cùng nhau

Mở thông báo, chat, khuyến mãi và thông báo xác thực cùng lúc; không lớp phủ nào nên che hành động chính hoặc trường đang có tiêu điểm.

04

Thực thi mọi đường dẫn nhập liệu

Màn hình lớn không đảm bảo có chuột, và màn hình nhỏ không đảm bảo chỉ có chạm. Media feature hover kiểm tra liệu một đầu vào chính có thể hover thuận tiện hay không, nên hover chỉ nên bổ trợ chứ không phải là con đường duy nhất đến một hành động hoặc giải thích. Kiểm thử sử dụng bàn phím và con trỏ trên desktop, chạm và cuộn trên thiết bị cảm ứng, và các thiết bị hỗn hợp khi cần. Xem xét các nút đóng nhỏ, bộ tăng giảm (steppers), chip, lịch và hành động biểu tượng. WCAG 2.2 Target Size (Minimum) chỉ định kích thước mục tiêu 24 by 24 CSS-pixel với các ngoại lệ xác định, bao gồm khoảng cách và liên kết nội tuyến. Đây là một tiêu chí có phạm vi và ngoại lệ, không phải lời hứa rằng mọi điều khiển 24-pixel đều dễ dùng như nhau cho tất cả mọi người.

Theo dõi tiêu điểm (focus)

Tab qua trang. Tiêu điểm nên luôn hiện rõ, theo thứ tự hợp lý, và vào ra menu và hộp thoại một cách dự đoán được.

Tránh nhiệm vụ chỉ dựa trên hover

Làm cho việc tiết lộ cần thiết khi hover có thể thực hiện được bằng focus, tap hoặc một điều khiển hiển thị, và ngăn hành vi chạm lần đầu gây nhầm lẫn.

05

Xác minh tài sản và hiệu năng trong điều kiện hạn chế

Một hình ảnh có thể vừa khung chứa nhưng vẫn là file sai cho thiết bị. Kiểm tra rằng media giữ trong container, dành không gian bố cục khi áp dụng, giữ crop hữu dụng và yêu cầu các ứng viên thích hợp. Srcset và sizes cung cấp thông tin cho trình duyệt chọn giữa các nguồn hình ảnh được cung cấp; chúng không đảm bảo một request cụ thể. Dùng DevTools throttling để phát hiện vấn đề sớm, nhưng các điều khiển CPU và mạng của nó mô phỏng điều kiện tương đối với máy phát triển. Kiểm tra lại các hành trình chính trên thiết bị và kết nối thực. Kiểm tra phông chữ, media hero, carousel, công việc phía khách hàng và script bên thứ ba để tìm chậm trễ, dịch chuyển hoặc chạm bị chặn.

Xem lại các request

Ghi lại lộ trình, viewport, kết nối thực hoặc mô phỏng, và thứ gì trở nên chậm hoặc không ổn định; so sánh trong các điều kiện tương đồng.

Kiểm thử lõi không có phần thêm

Khi an toàn, trì hoãn các nhúng không thiết yếu trong bản thử nghiệm để biết liệu nhiệm vụ lõi có vẫn sử dụng được hay không.

06

Sửa chữa như công việc chủ động cho thời gian hoạt động (uptime)

Với Status Is UP, sẵn sàng đáp ứng là tối ưu hóa thời gian hoạt động chủ động: xác định đường dẫn thiết bị chặn người dùng, sửa nguyên nhân, chứng minh khắc phục và ngăn tái phát. Đây không phải là tuyên bố rằng một cảnh báo giám sát có thể đánh giá mọi lỗi bố cục hoặc tương tác. Ưu tiên theo tác động và phạm vi tiếp cận của nhiệm vụ. Trước khi triển khai, kiểm thử các chiều rộng lân cận và hành trình đã thay đổi trên phần cứng thực. Lên kế hoạch rollback cho các thay đổi tới điều hướng chia sẻ, style, script, thanh toán hoặc tích hợp. Sau khi phát hành, lặp lại các bước chứng minh và đính kèm bằng chứng vào bản ghi thay đổi.

Viết lỗi có thể tái tạo

Nêu rõ lộ trình, thiết bị hoặc viewport, hướng, phương thức nhập, trạng thái, kết quả mong đợi, kết quả thực tế và một ảnh chụp đã được làm mờ (redacted).

Sửa nguồn gốc

Ưu tiên sửa thành phần, quy tắc bố cục, token hoặc giao diện phân phối hình ảnh hơn là ghi đè chỉ cho một lộ trình; giao cho ngoại lệ một người chịu trách nhiệm và kế hoạch gỡ bỏ.

HÀNH ĐỘNG / XÁC MINH

Hướng dẫn việc cần làm thiết thực.

  1. 01

    Chọn hành trình và trạng thái

    Đặt tên các lộ trình giá trị cao và menu, biểu mẫu, ngăn kéo, media, bảng, banner, nhúng và các đường dẫn đăng nhập hoặc thanh toán của chúng.

    XÁC MINH: Một bảng kiểm thử xác định lộ trình, kết quả nhiệm vụ, thành phần, người chịu trách nhiệm và trạng thái nội dung.
  2. 02

    Đặt phạm vi chiều rộng và hướng

    Kiểm thử các chiều rộng hẹp, cỡ trung, giống máy tính bảng, laptop và desktop rộng, cộng cả hai bên của mọi điểm ngắt do nội dung dẫn dắt.

    XÁC MINH: Mỗi điểm ngắt chính có kết quả ngay dưới và ngay trên nó, cộng các kết quả landscape liên quan.
  3. 03

    Kiểm tra viewport, chạy lại bố cục và phóng to

    Thay đổi kích thước liên tục và tìm cuộn ngang, cắt, chồng lấp, nội dung ẩn và UI cố định che nhiệm vụ.

    XÁC MINH: Văn bản và điều khiển thông thường vẫn sử dụng được; ghi lại bài kiểm thử 320 CSS-pixel và phóng to khi nhắm mục tiêu Reflow của WCAG.
  4. 04

    Đặt áp lực nội dung giống bản sản xuất

    Thực hiện các trạng thái dài, rỗng, lỗi, được chọn, thiếu media và được trình duyệt điền sử dụng dữ liệu kiểm thử an toàn.

    XÁC MINH: Thông tin bắt buộc vẫn có sẵn và thứ tự hiển thị, đọc và tiêu điểm vẫn hợp lý.
  5. 05

    Hoàn thành nhiệm vụ bằng bàn phím và chạm

    Tab qua desktop và chạm trên thiết bị cảm ứng thực, bao gồm menu, hộp thoại, các điều khiển gần đó, lỗi và gửi.

    XÁC MINH: Tiêu điểm hiện rõ, hành động thiết yếu không yêu cầu hover và các thao tác chạm không kích hoạt hành động lân cận.
  6. 06

    Kiểm tra tài sản và hiệu năng bị hạn chế

    Xem xét hình ảnh, phông chữ, video, nội dung nhúng và request ở kích thước render; dùng giả lập và kiểm tra lại trên thiết bị thực.

    XÁC MINH: Tài sản không gây tràn hoặc chuyển động bố cục có thể tránh được, và bằng chứng phân biệt mô phỏng với kiểm thử thiết bị vật lý.
  7. 07

    Ghi nhật ký và sửa nguyên nhân chung

    Ghi lại các lỗi có thể tái tạo, sau đó sửa thành phần, quy tắc tài sản hoặc quy tắc bố cục thay vì che dấu cho một lộ trình duy nhất.

    XÁC MINH: Bằng chứng trước-và-sau cho thấy vấn đề ban đầu và việc kiểm tra các chiều rộng lân cận hoặc thành phần tái sử dụng đều đạt.
  8. 08

    Phát hành với cơ chế hồi phục

    Dùng các kiểm soát thay đổi bình thường cho style, script, thanh toán, nhận dạng hoặc thay đổi nhà cung cấp chia sẻ và quyết định cách đảo lại gây hại.

    XÁC MINH: Bản ghi phát hành nêu một người chịu trách nhiệm, các bước xác thực, điểm quyết định rollback và kiểm tra sau phát hành.
CHỦ ĐỀ THẢO LUẬN

So sánh các đánh đổi, không chia sẻ dữ liệu riêng tư.

Dùng các câu hỏi này với nhóm hoặc cộng đồng chủ sở hữu website. Chia sẻ phương pháp và bài học, nhưng tuyệt đối không dán thông tin đăng nhập, hồ sơ khách hàng hay chi tiết hạ tầng không công khai.

  1. 01

    Hành trình khách hàng nào đã phơi bày lỗi đáp ứng hữu ích nhất của bạn, và điều kiện kiểm thử nào làm cho nó có thể tái hiện?

  2. 02

    Đội của bạn quyết định thế nào rằng một breakpoint do nội dung điều khiển chứ không phải do một mẫu thiết bị cụ thể?

  3. 03

    Bạn giữ lại bằng chứng gì để một thay đổi sau này về theme, nội dung hoặc nhà cung cấp không tái giới thiệu lỗi đáp ứng cố định?

TÀI NGUYÊN PHỔ BIẾN / UY TÍN

Mở tài liệu nguồn.

web.devResponsive web design basics ↗

Hướng dẫn thực tế về viewport, bố cục linh hoạt, điểm ngắt do nội dung điều khiển, khả năng đầu vào và hiện tượng tràn (overflow).

Đã rà soát 2026-09-27
W3C Web Accessibility InitiativeUnderstanding Success Criterion 1.4.10: Reflow ↗

Giải thích điều kiện Reflow của WCAG 2.1 AA và các ngoại lệ hạn chế cho bố cục hai chiều.

Đã rà soát 2026-09-27
W3C Web Accessibility InitiativeUnderstanding Success Criterion 2.5.8: Target Size (Minimum) ↗

Định nghĩa bài kiểm tra kích thước mục tiêu 24 by 24 CSS-pixel, quy tắc khoảng cách và các ngoại lệ (WCAG 2.2 Target Size).

Đã rà soát 2026-09-27
Chrome for DevelopersSimulate mobile devices with Device Mode ↗

Bao quát viewport, hướng, cảm ứng, throttling và giới hạn của mô phỏng trên desktop (DevTools).

Đã rà soát 2026-09-27
web.devDescriptive syntaxes ↗

Giải thích cách srcset và sizes mô tả các nguồn hình ảnh đáp ứng để trình duyệt lựa chọn.

Đã rà soát 2026-09-27
MDN Web Docshover CSS media feature ↗

Định nghĩa những gì media feature hover kiểm tra để đội ngũ không giả định rằng hover là đầu vào phổ quát.

Đã rà soát 2026-09-27

Chính sách nguồn. Bài viết này sử dụng tiêu chuẩn chính thức, tài liệu của nhà cung cấp trình duyệt và nền tảng web đã được đọc trong quá trình nghiên cứu. Các liên kết điều hướng không phải là nguồn bằng chứng. Xin có đánh giá đủ điều kiện cho các quyết định liên quan đến truy cập trang web, thanh toán, bảo mật, pháp lý hoặc trình duyệt được hỗ trợ riêng cho từng site.

GIẢI ĐÁP NHANH

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

Nên kiểm thử thiết bị nào cho thiết kế đáp ứng?

Dùng một tập bao phủ thay vì cố gắng bao gồm mọi mẫu: các chiều rộng hẹp, cỡ trung, giống máy tính bảng, laptop và desktop rộng, cộng các breakpoint nơi nội dung thay đổi. Thêm các thiết bị thực đại diện cho các đường dẫn khách hàng quan trọng và dùng chế độ ngang khi nó thay đổi trải nghiệm.

Chrome Device Mode có đủ cho QA đáp ứng không?

Không. Nó hiệu quả trong việc lộ ra các vấn đề viewport, hướng, sự kiện chạm và throttling, nhưng Chrome mô tả nó là một xấp xỉ chứ không phải mã chạy trên thiết bị. Dùng nó để bao phủ rộng, rồi hoàn tất các nhiệm vụ quan trọng trên thiết bị vật lý.

Tôi có cần một site di động riêng để đáp ứng không?

Thông thường không. Thiết kế đáp ứng điều chỉnh một trải nghiệm duy nhất thông qua bố cục linh hoạt, media query khi cần và tài nguyên đáp ứng. Bài kiểm thử là liệu nhiệm vụ khách hàng được hỗ trợ, nội dung, khả năng truy cập và hiệu năng có hoạt động trong các ngữ cảnh bạn hỗ trợ hay không.

Status Is UP Editorial Team · Biên tập Viên Hỗ trợ Thời gian Hoạt động

Được rà soát bởi Người rà soát Khả năng Truy cập và Hiệu năng Front-End. Xuất bản 2026-09-27; cập nhật 2026-09-30.