تجربه: 2

سن: 18 الی 30

محدوده حقوق و دستمزد: قابل مذاکره

جای خالی: 1

طبیعت شغلی : پیمانی

تاریخ ارسال : 2025.10.09

آخرین تاریخ : 2025.10.30

شرح مسئله

در محیط موبایل (و در برخی مرورگرها) هنگام کلیک/فوکوس روی فیلدهای ورودی، صفحه به‌طور ناگهانی زوم می‌کند که تجربه کاربری را نامطلوب می‌سازد. این مشکل باید در تمامی صفحات داخلی سامانه بررسی و رفع شود.

هدف

رفع کامل مشکل زوم شدن صفحه هنگام فوکوس روی هر input/textarea در تمامی صفحات داخلی، به‌طوری که:

تجربه کاربری یکنواخت و بدون تغییر مقیاس باشد،

الزامات و محدودیت‌ها

تغییرات فرانت‌اند باید سازگار با مرورگرهای متداول موبایل (iOS Safari، Android Chrome) باشد.

هرگز از هک‌های موقت که باعث مشکلات جانبی می‌شود استفاده نگردد؛ راه‌حل باید پایدار و استاندارد باشد.

پیشنهادهای فنی (قابل اجرا)

(تیم توسعه می‌تواند یکی یا ترکیبی از این موارد را انتخاب و به‌کار ببرد)

• بررسی و اصلاح font-size فیلدها (دقت: در iOS وقتی فونت کمتر از 16px است مرورگر صفحه را زوم می‌کند — افزایش یا تنظیم مناسب فونت می‌تواند مشکل را حل کند).

• اضافه کردن/بررسی meta viewport و -webkit-text-size-adjust: 100% در صورت نیاز.

• بررسی CSS مربوط به input/textarea در ریست‌ها و کامپوننت‌ها و اعمال اصلاحات سازگار با سیستم دیزاین.

• اطمینان از اینکه تغییرات برای هر دو تم (Light/Dark) اعمال شده

   

گام‌های کاری (پیشنهادی)

1. بازتولید مشکل و مستندسازی: ثبت مراحل بازتولید (دستگاه، مرورگر، نسخه‌ها) و ضبط ویدیو/اسکرین‌شات.

2. تحلیل علت: بررسی CSS و کامپوننت‌های فعلی، بررسی فونت‌ها و متا تگ‌ها.

3. پیاده‌سازی اصلاحات در کد (فرانت‌اند)

4. تست گسترده: تست روی iOS Safari و Android Chrome و یک مرورگر دسکتاپ برای اطمینان از عدم ایجاد اثرات جانبی.

معیار پذیرش (Acceptance Criteria)

• هنگام فوکوس روی هر input/textarea در همه صفحات داخلی، هیچ زومی اتفاق نمی‌افتد در دستگاه‌های موبایل رایج.

• کامپوننت‌های ورودی در Figma برای هر دو تم (Light/Dark) به‌روز شده

• لیست دستگاه‌ها/مرورگرهای تست‌شده و نتایج تست (اسکرین‌شات یا ویدیو) ضمیمه شود.

• هیچ رگرسیونی (اثر منفی بر سایر ورودی‌ها یا چیدمان‌ها) مشاهده نشود.

  ----------------------------------------------------------------

  ذکر منابع مرتبط به تسک :

  نمونه زوم انجام شده

  https://drive.google.com/file/d/1opRnFCKGafzDxWi7H5hoKyeET1sIW4oM/view?usp=sharing

  دسترسی به ریپازیتوری پروژه ریکت داخلی متارنگ :

  https://github.com/iranpsc/Metaverse-Rang-Front-React

  لینک فیگما بخش های داخلی متارنگ :

  https://www.figma.com/design/lHgvuzgJhUFACNpMBJK0jI/ui?node-id=34-1989&t=0VPAk1dawHgxTSif-1
  

  لینک سایت رسمی پروژه :

  https://rgb.irpsc.com/fa

  دسترسی به سامانه مدیریت بر مدیران :

  https://crm.irpsc.com