توسط نیما صابری
۲۸ بهمن ۱۳۹۵آزادی انتخاب برای کاربر با امکان سوئیچ بین ریسپانسیو و دسکتاپ
همونطور که در مقاله «چرا طراحی واکنش‌گرا یا Responsive ؟!» اشاره کردیم، «حاصل یک طراحی واکنش‌گرا به صورت اصولی داشتن یک رابط کاربری وب با امکان نمایش مناسب در مرورگرهای مختلف موبایل، تبلت، لپ تاپ و کامپیوترهای خانگی با مانیتورهای مختلفه»، اما این درحالی هست که در طراحی ریسپانسیو جزئیات یا گاهی اوقات بخش‌هایی از سایت رو مخفی می‌کنیم یا چیدمان منوی راهبری و سایر اجزا رو تغییر میدیم و در خیلی از مواقع کاربر باید اسکرول زیادی انجام بده تا مطالب رو مطالعه کرده یا به انتهای صفحه برسه …
در این حالت، باید این شرایط رو در نظر بگیریم که ممکنه کاربر در بازدید از طریق موبایل یا تبلت تمایل به دیدن نسخه‌ای اصلی داشته باشه و اطلاع یا دسترسی به گزینه Request Desktop Site در مرورگر نداشته باشه ؛ ما هم گزینه‌ای برای ارائه به کاربر نداریم، مگر اینکه بگیم برو و از یه دیوایس با سایز صفحه نمایش بزرگتر بازدید انجام بده، که بعید میدونم بشه به عنوان یه راه حل یا پاسخ روش حساب باز کرد : )
معرفی Responsive Switch
این پلاگین جاوا اسکریپت همونطور که از اسمش پیداست برای فراهم کردن امکان سوئیچ بین نسخه دسکتاپ و نسخه ریسپانسیو نوشته شده، که میتونید دموی اون رو از طریق سایت خودش یا سایت نمونه‌ای که ما از این پلاگین در اون استفاده کردیم، مشاهده کنید.
برای استفاده از پلاگین معرفی شده کافیه بسته جاوا اسکریپت اون رو که حجمی حدود ۳ کیلوبایت داره در هدر قالب قرار داده و تگ A رو در انتهای صفحه (داخل تگ body) جایگذاری کنید. همین.
<html> <head> ... <script src="scripts/responsive-switch.min.js"></script> ... </head> <body> ... <a href="#" class="btn btn-link" data-link-desktop="مشاهده نسخه دسکتاپ" data-link-responsive="مشاهده نسخه ریسپانسیو" data-always-visible="false"></a> ... </body> </html>
پ.ن: ناگفته نمونه که کمی تغییرات در این پلاگین اعمال کردیم، که بعضی نقایص اون رو مثل رفرش شدن صفحه برطرف کردیم ؛ میتونید از اینجا دانلودش کنید.
