Kiểm thử trên thiết bị di động

Dùng công cụ chuyển đổi viewport responsive trong builder để kiểm tra nhanh, sau đó publish và kiểm thử trên thiết bị thật cho bất kỳ tính năng nào liên quan đến hành vi chỉ có trên mobile.

Kiểm thử mobile trong Proyecta có hai lớp: xem trước responsive ngay trong builder, và kiểm thử trên thiết bị thật với một URL đã được publish.

Xem trước responsive trong builder

Bảng preview có công cụ chuyển đổi viewport trên thanh địa chỉ:

Chế độ	Kích thước
Desktop	Toàn bộ chiều rộng cửa sổ
Tablet	768 × 1024
Mobile	390 × 844

Hãy chuyển đổi giữa các chế độ trong khi chỉnh sửa để phát hiện sớm các vấn đề về layout. Đây là cách nhanh nhất để bắt các lỗi responsive rõ ràng (tràn nội dung, lưới bị vỡ, nút không thể nhấn).

Mở ứng dụng trên điện thoại bằng mã QR

Cách nhanh nhất để kiểm thử trên thiết bị thật là dùng tab Mobile → Test trên dashboard. Khi ứng dụng của bạn đã được publish, tab này sẽ hiển thị một mã QR — quét nó bằng camera điện thoại để mở ứng dụng live ngay lập tức. Ngoài ra còn có nút Copy link nếu bạn muốn tự gửi URL cho mình. (Nếu bạn chưa publish, tab sẽ nhắc bạn publish trước — kiểm thử trên thiết bị cần một URL live.)

Kiểm thử trên thiết bị thật

Công cụ chuyển đổi viewport chỉ mô phỏng kích thước màn hình — nó không mô phỏng thao tác chạm, độ trễ thực tế, các quirk của trình duyệt mobile, hay hành vi đặc thù của từng nền tảng. Đối với những thứ bạn thực sự quan tâm (tương tác cảm ứng, install prompt, push notification, camera, GPS), hãy kiểm thử trên thiết bị thật:

1. Publish ứng dụng lên subdomain *.proyecta.live của bạn
2. Mở URL trên trình duyệt điện thoại
3. Nếu bạn đã thêm hỗ trợ PWA, chọn Add to Home Screen và kiểm thử trải nghiệm sau khi cài đặt
4. Đi qua các luồng bạn quan tâm

Những điều chỉ có thể phát hiện trên thiết bị thật

• Kích thước vùng chạm — ngón tay to hơn con trỏ chuột
• Các phần tử sticky — các đơn vị viewport hoạt động khác đi khi có thanh chrome của trình duyệt mobile
• Nhập liệu form — autofill, loại bàn phím, autocomplete
• Các quirk của iOS Safari — vấn đề 100vh, scroll-bouncing, fixed positioning
• Luồng xin quyền push notification — chỉ hoạt động trên một origin đã publish qua HTTPS trong tab trình duyệt cấp cao nhất; sẽ không kích hoạt bên trong bảng preview của builder (kể cả khi preview đã được phục vụ qua HTTPS).
• Hiệu năng trên phần cứng thật (chậm hơn)

Mẹo kiểm thử

• Dùng công cụ developer trên điện thoại. Safari trên macOS có thể kết nối với mobile Safari để debug trực tiếp; Chrome có thể kết nối với Android Chrome.
• Kiểm thử ở chế độ landscape. Hầu hết các developer chỉ kiểm thử portrait và bỏ sót các lỗi landscape.
• Kiểm thử với chế độ tiết kiệm pin. Các animation và timer hoạt động khác đi trong chế độ này.
• Kiểm thử push PWA trên iPhone thật. Push notification trên iOS chỉ hoạt động từ một PWA được cài đặt qua Safari.