تست روی موبایل
از سوئیچر viewport واکنشگرا در builder برای بررسی سریع استفاده کنید، سپس برای هر چیزی که به رفتار موبایل اختصاص دارد، منتشر کنید و روی یک دستگاه واقعی تست بگیرید.
تست موبایل در Proyecta دو لایه دارد: پیشنمایش واکنشگرا درون builder، و تست روی دستگاه واقعی با یک URL منتشرشده.
پیشنمایش واکنشگرا در builder
Section titled “پیشنمایش واکنشگرا در builder”پانل پیشنمایش یک سوئیچر viewport در نوار آدرس دارد:
| حالت | ابعاد |
|---|---|
| Desktop | عرض کامل پنجره |
| Tablet | 768 × 1024 |
| Mobile | 375 × 667 |
در حین ویرایش بین آنها جابهجا شوید تا مشکلات طرحبندی را زود شناسایی کنید. این سریعترین روش برای پیدا کردن باگهای آشکار واکنشگرا است (overflow، grid های شکسته، دکمههایی که نمیشود روی آنها ضربه زد).
تست روی دستگاه واقعی
Section titled “تست روی دستگاه واقعی”سوئیچر viewport فقط ابعاد را شبیهسازی میکند — ورودی لمسی، تأخیر دنیای واقعی، رفتارهای خاص مرورگر موبایل یا رفتار وابسته به پلتفرم را شبیهسازی نمیکند. برای هر چیزی که واقعاً برایتان اهمیت دارد (تعاملات لمسی، install prompt ها، push notification ها، دوربین، GPS)، روی دستگاه واقعی تست بگیرید:
- اپ خود را Publish کنید روی subdomain
*.proyecta.liveآن - URL را باز کنید در مرورگر گوشیتان
- اگر پشتیبانی PWA اضافه کردهاید، گزینه Add to Home Screen را انتخاب کنید و تجربه نصبشده را تست کنید
- جریانهایی که برایتان مهم هستند را طی کنید
چیزهایی که فقط روی دستگاه واقعی میتوان شناسایی کرد
Section titled “چیزهایی که فقط روی دستگاه واقعی میتوان شناسایی کرد”- اندازه tap target ها — انگشتان بزرگتر از نشانگر ماوس هستند
- عناصر sticky — واحدهای viewport با chrome مرورگر موبایل رفتار متفاوتی دارند
- ورودی فرم — autofill، نوع صفحهکلید، autocomplete
- رفتارهای خاص iOS Safari — مشکلات
100vh، scroll-bouncing، fixed positioning - جریان مجوز push notification — فقط روی یک origin منتشرشده از طریق HTTPS در یک تب مرورگر سطح اول کار میکند؛ درون پانل پیشنمایش builder اجرا نمیشود (حتی زمانی که پیشنمایش از قبل از طریق HTTPS ارائه میشود).
- عملکرد روی سختافزار واقعی (کندتر)
نکات تست
Section titled “نکات تست”- از ابزارهای developer گوشیتان استفاده کنید. Safari در macOS میتواند برای debugging زنده به mobile Safari متصل شود؛ Chrome میتواند به Android Chrome متصل شود.
- در حالت landscape هم تست بگیرید. اکثر توسعهدهندگان فقط حالت portrait را تست میکنند و باگهای landscape را از دست میدهند.
- با فعالبودن حالت low-power تست بگیرید. انیمیشنها و تایمرها رفتار متفاوتی دارند.
- برای PWA push روی آیفون واقعی تست بگیرید. Push notification ها در iOS فقط از یک PWA نصبشده از طریق Safari کار میکنند.