Kiểm Thử Trên Mobile
Sử dụng công cụ chuyển đổi viewport trong builder để kiểm tra nhanh, sau đó publish và thử nghiệm trên thiết bị thật cho mọi thứ liên quan đến hành vi chỉ có trên mobile.
Kiểm thử mobile trong Proyecta có hai lớp: preview responsive ngay trong builder, và kiểm thử trên thiết bị thật thông qua URL đã được publish.
Preview responsive trong builder
Phần tiêu đề “Preview responsive trong builder”Bảng preview có công cụ chuyển đổi viewport nằm 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 | 375 × 667 |
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ề bố cục. Đây là cách nhanh nhất để bắt các lỗi responsive rõ ràng (tràn nội dung, grid bị vỡ, nút không thể nhấn).
Kiểm thử trên thiết bị thật
Phần tiêu đề “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 được thao tác cảm ứng, độ 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. Với những tính năng bạn thực sự quan tâm (thao tác cảm ứng, install prompt, push notification, camera, GPS), hãy kiểm thử trên thiết bị thật:
- Publish ứng dụng lên subdomain
*.proyecta.livecủa bạn - Mở URL trên trình duyệt điện thoại
- 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
- Đi qua các luồng mà bạn quan tâm
Những điều chỉ có thể phát hiện trên thiết bị thật
Phần tiêu đề “Những điều chỉ có thể phát hiện trên thiết bị thật”- Kích thước vùng nhấn — ngón tay lớn hơn con trỏ chuột nhiều
- Phần tử sticky — đơ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 đề với
100vh, cuộn nảy, fixed positioning - Luồng cấp quyền push notification — chỉ hoạt động trên origin đã được 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 (dù preview đã được phục vụ qua HTTPS).
- Hiệu năng trên phần cứng thực tế (thường chậm hơn)
Mẹo kiểm thử
Phần tiêu đề “Mẹo kiểm thử”- Dùng công cụ developer trên điện thoại của bạn. 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ế độ ngang (landscape) nữa. Hầu hết lập trình viên chỉ kiểm thử dọc và bỏ sót các lỗi landscape.
- Kiểm thử với chế độ tiết kiệm pin bật. Animation và timer hoạt động khác đi trong chế độ này.
- Kiểm thử trên iPhone thật cho PWA push. Push notification trên iOS chỉ hoạt động từ PWA được cài đặt qua Safari.