ทดสอบบนมือถือ

ใช้ตัวสลับ viewport แบบ responsive ใน builder เพื่อตรวจสอบเบื้องต้น จากนั้น publish และทดสอบบนอุปกรณ์จริงสำหรับพฤติกรรมที่เกิดขึ้นเฉพาะบนมือถือ

การทดสอบบนมือถือใน Proyecta มีสองระดับ ได้แก่ การแสดงตัวอย่างแบบ responsive ภายใน builder และการทดสอบบนอุปกรณ์จริงผ่าน URL ที่ publish แล้ว

การแสดงตัวอย่างแบบ responsive ใน builder

แผงแสดงตัวอย่างมีตัวสลับ viewport อยู่ในแถบที่อยู่:

โหมด	ขนาด
Desktop	ความกว้างเต็มหน้าต่าง
Tablet	768 × 1024
Mobile	390 × 844

สลับไปมาระหว่างโหมดเหล่านี้ขณะแก้ไข เพื่อตรวจจับปัญหาด้านการจัดวางตั้งแต่เนิ่นๆ นี่คือวิธีที่เร็วที่สุดในการค้นหาบัก responsive ที่ชัดเจน เช่น overflow, grid พัง หรือปุ่มที่กดไม่ได้

เปิดบนโทรศัพท์ด้วย QR code

วิธีที่เร็วที่สุดในการทดสอบบนอุปกรณ์จริงคือแท็บ Mobile → Test ใน dashboard เมื่อ app ของคุณถูก publish แล้ว ระบบจะแสดง QR code — สแกนด้วยกล้องโทรศัพท์เพื่อเปิด app ที่ใช้งานได้จริงทันที นอกจากนี้ยังมีปุ่ม Copy link หากต้องการส่ง URL ให้ตัวเอง (หากยังไม่ได้ publish แท็บจะแจ้งให้ publish ก่อน เนื่องจากการทดสอบบนอุปกรณ์ต้องใช้ URL ที่ใช้งานได้จริง)

ทดสอบบนอุปกรณ์จริง

ตัวสลับ viewport จำลองเพียงขนาดหน้าจอเท่านั้น — ไม่ได้จำลอง touch input, latency ในโลกจริง, ความแปลกของ mobile browser หรือพฤติกรรมเฉพาะของแต่ละแพลตฟอร์ม สำหรับสิ่งที่สำคัญจริงๆ (การโต้ตอบแบบ touch, install prompt, push notification, กล้อง, GPS) ให้ทดสอบบนอุปกรณ์จริง:

1. Publish app ของคุณไปยัง subdomain *.proyecta.live
2. เปิด URL บน browser ของโทรศัพท์
3. หากเพิ่ม PWA support แล้ว ให้เลือก Add to Home Screen และทดสอบประสบการณ์แบบติดตั้ง
4. ทดสอบ flow ที่คุณให้ความสำคัญ

สิ่งที่ตรวจพบได้เฉพาะบนอุปกรณ์จริง

• ขนาดพื้นที่กด (Tap target sizes) — นิ้วมือใหญ่กว่าเคอร์เซอร์เมาส์
• Sticky elements — หน่วย viewport ทำงานต่างกันเมื่อมี mobile browser chrome
• การกรอกฟอร์ม — autofill, ประเภทคีย์บอร์ด, autocomplete
• ความแปลกของ iOS Safari — ปัญหา 100vh, scroll-bouncing, การจัดตำแหน่งแบบ fixed
• ขั้นตอนการขอสิทธิ์ push notification — ใช้งานได้เฉพาะบน origin ที่ publish แล้วผ่าน HTTPS ใน browser tab ระดับบนสุดเท่านั้น จะไม่ทำงานภายในแผงแสดงตัวอย่างของ builder (แม้ว่าตัวอย่างนั้นจะให้บริการผ่าน HTTPS อยู่แล้วก็ตาม)
• ประสิทธิภาพ บนฮาร์ดแวร์จริง (ที่ช้ากว่า)

เคล็ดลับในการทดสอบ

• ใช้ developer tools ของโทรศัพท์ Safari บน macOS สามารถเชื่อมต่อกับ mobile Safari เพื่อ debug แบบ live ได้ และ Chrome สามารถเชื่อมต่อกับ Android Chrome ได้
• ทดสอบในโหมด landscape ด้วย นักพัฒนาส่วนใหญ่ทดสอบเฉพาะโหมด portrait และพลาดบักในโหมด landscape
• ทดสอบโดยเปิดโหมดประหยัดพลังงาน animation และ timer ทำงานต่างกันในโหมดนี้
• ทดสอบบน iPhone จริงสำหรับ PWA push push notification บน iOS ใช้งานได้เฉพาะจาก PWA ที่ติดตั้งผ่าน Safari เท่านั้น