a. Web browser: Google chrome Version 116.0.5845.111 - Hệ điều hành: Windows 11
b. Các bước để phát hiện lỗi:
i. #1: Truy cập vào trang web https://mohinhfigure.com/
ii. #2: Mở DevTools (F12) và chọn chế độ responsive với kích thước iPad Pro (1024 x 1366)
iii. #3: Quan sát phần 4 ô thông tin dịch vụ (Giao hàng nhanh, Miễn phí giao hàng, Ký gửi bán hộ, Hỗ trợ 24/7)
iv. #4: Điều chỉnh kích thước màn hình để kiểm tra responsive
c. Kết quả thực tế:
4 ô thông tin dịch vụ xếp thành 2 hàng 2 cột không đều nhau
Các ô có kích thước khác nhau, không đồng bộ
Layout bị vỡ và mất tính thẩm mỹ khi hiển thị ở kích thước màn hình tablet
d. Kết quả mong đợi:
4 ô thông tin dịch vụ nên được sắp xếp đều nhau theo 1 hàng ngang hoặc 2 hàng 2 cột đồng đều (ở tablet)
Các ô nên có kích thước bằng nhau
Layout nên giữ được tính thẩm mỹ và cân đối ở mọi kích thước màn hình
a. Web browser: Google chrome Version 116.0.5845.111 - Hệ điều hành: Windows 11 b. Các bước để phát hiện lỗi: i. #1: Truy cập vào trang web https://mohinhfigure.com/ ii. #2: Mở DevTools (F12) và chọn chế độ responsive với kích thước iPad Pro (1024 x 1366) iii. #3: Quan sát phần 4 ô thông tin dịch vụ (Giao hàng nhanh, Miễn phí giao hàng, Ký gửi bán hộ, Hỗ trợ 24/7) iv. #4: Điều chỉnh kích thước màn hình để kiểm tra responsive c. Kết quả thực tế: 4 ô thông tin dịch vụ xếp thành 2 hàng 2 cột không đều nhau Các ô có kích thước khác nhau, không đồng bộ Layout bị vỡ và mất tính thẩm mỹ khi hiển thị ở kích thước màn hình tablet
d. Kết quả mong đợi: 4 ô thông tin dịch vụ nên được sắp xếp đều nhau theo 1 hàng ngang hoặc 2 hàng 2 cột đồng đều (ở tablet) Các ô nên có kích thước bằng nhau Layout nên giữ được tính thẩm mỹ và cân đối ở mọi kích thước màn hình