Uji di Perangkat Mobile
Gunakan viewport switcher responsif di builder untuk pemeriksaan cepat, lalu publish dan uji pada perangkat nyata untuk hal apa pun yang menyentuh perilaku khusus mobile.
Ada dua lapisan pengujian mobile di Proyecta: preview responsif di dalam builder, dan pengujian pada perangkat nyata melalui URL yang sudah dipublish.
Preview responsif di builder
Section titled “Preview responsif di builder”Panel preview menyertakan viewport switcher di address bar:
| Mode | Dimensi |
|---|---|
| Desktop | Lebar window penuh |
| Tablet | 768 × 1024 |
| Mobile | 375 × 667 |
Beralih di antara mode-mode tersebut saat mengedit untuk mendeteksi masalah layout lebih awal. Ini adalah cara tercepat untuk menangkap bug responsif yang jelas (overflow, grid yang berantakan, tombol yang tidak bisa diketuk).
Uji pada perangkat nyata
Section titled “Uji pada perangkat nyata”Viewport switcher hanya mensimulasikan dimensi — ia tidak mensimulasikan input sentuh, latensi dunia nyata, keanehan browser mobile, atau perilaku khusus platform. Untuk hal apa pun yang benar-benar penting (interaksi sentuh, install prompt, push notification, kamera, GPS), uji pada perangkat nyata:
- Publish aplikasimu ke subdomain
*.proyecta.live-nya - Buka URL tersebut di browser ponselmu
- Jika kamu telah menambahkan dukungan PWA, pilih Add to Home Screen dan uji pengalaman setelah terinstal
- Jalani alur-alur yang kamu pedulikan
Hal yang hanya bisa terdeteksi di perangkat nyata
Section titled “Hal yang hanya bisa terdeteksi di perangkat nyata”- Ukuran tap target — jari lebih besar dari pointer mouse
- Elemen sticky — satuan viewport berperilaku berbeda dengan chrome browser mobile
- Input formulir — autofill, jenis keyboard, autocomplete
- Keanehan iOS Safari — masalah
100vh, scroll-bouncing, fixed positioning - Alur izin push notification — hanya berfungsi pada origin yang sudah dipublish melalui HTTPS di tab browser tingkat atas; tidak akan aktif di dalam panel preview builder (bahkan ketika preview sudah dijalankan melalui HTTPS).
- Performa pada hardware nyata (yang lebih lambat)
Tips pengujian
Section titled “Tips pengujian”- Gunakan developer tools ponselmu. Safari di macOS dapat terhubung ke mobile Safari untuk live debugging; Chrome dapat terhubung ke Android Chrome.
- Uji dalam mode landscape juga. Kebanyakan developer hanya menguji mode portrait dan melewatkan bug landscape.
- Uji dengan low-power mode aktif. Animasi dan timer berperilaku berbeda dalam kondisi ini.
- Uji pada iPhone nyata untuk PWA push. Push notification di iOS hanya berfungsi dari PWA yang diinstal melalui Safari.