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

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

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

การ preview แบบ responsive ใน builder

แผง preview มีตัวสลับ viewport อยู่ใน address bar:

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

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

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

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

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

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

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

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

ใช้ developer tools บนโทรศัพท์ของคุณ Safari บน macOS สามารถเชื่อมต่อกับ mobile Safari เพื่อ debug แบบ live ได้ และ Chrome สามารถเชื่อมต่อกับ Android Chrome ได้เช่นกัน
ทดสอบในโหมด landscape ด้วย นักพัฒนาส่วนใหญ่ทดสอบเฉพาะแนวตั้งและพลาด bug ในแนวนอน
ทดสอบเมื่อเปิด low-power mode แอนิเมชันและ timer มีพฤติกรรมที่แตกต่างออกไป
ทดสอบบน iPhone จริงสำหรับ PWA push Push notifications บน iOS ใช้งานได้เฉพาะจาก PWA ที่ติดตั้งผ่าน Safari เท่านั้น