ساخت دکمه Desktop Site برای سایت
مقالات طراحی سایتچگونه دکمه Desktop Site برای سایت خودمان طراحی کنیم تا بدون نیاز به تنظیمات مرورگر گوشی ، وضعیت نمایش سایت را تغییر دهیم !
شاید جمله ” ساخت دکمه Desktop Site برای سایت ” برای شما کمی عجیب باشد اما این آموزش دقیقا برای آن دسته از دوستانی ارائه شده است که دقیقا به دنبال چنین چیزی هستند . امروزه تمامی وب سایت ها با حالت واکنشگرا در موبایل طراحی می‌شوند و شما زمانی که سایت را در موبایل باز می‌کنید ، دیزاین آن را تماما در حالت واکنشگرا ( Responsive ) مشاهده خواهید کرد که منوهای سایت تبدیل به یک منو آبشاری کوچک شده و سایر المان ها در زیرهم با نظم خاصی قرار گرفته است .
در برخی سایت ها زمانی که شما نیاز دارید تا حالت ” دسکتاپ ” سایت را مشاهده کنید ، باید از تنظیمات مرورگر گزینه ” Desktop Site ” را انتخاب کنید تا مرورگر موبایل برای شما سایت را در حالت دسکتاپ و اصطلاحا غیر ریسپانسیو نمایش دهد . اما آیا می‌توان دکمه‌ای را خودمان طراحی کنیم که با کلیک روی آن در حالت موبایل ، سایت به حالت دسکتاپ تغییر کند ؟ بله انجام این کار توسط 2 خط کد جاوا اسکریپتی کاملا ممکن است .
سورس کد ساخت دکمه Desktop Site
برای این‌کار ابتدا باید یک دکمه طراحی کنید که تنها در حالت موبایل نمایش داده شود یعنی می‌توانید در محل دلخواه قالب خودتان یک button یا حتی یک تگ span تعریف کنید و توسط یک کلاس که به آن خواهید داد یک دستور مدیا بنویسید . تصور کنید دکمه ما به شکل زیر در html ایجاد شده است :
<button onclick="requestDesktopSite()" class="DesktopSite">Request Desktop Site</button>خب اکنون برای اینکه این دکمه تنها در حالت موبایل و نهایتا تا عرض های 480 پیکسل نمایش داده شود می‌توان کد زیر را به فایل Css اضافه کرد :
@media only screen and (max-width:480px){
.DesktopSite{
display:none;
}
}تا این قسمت فقط روی طراحی و حالت های نمایشی دکمه کار کردیم اما مهم‌ترین قسمت این کار هنوز مانده است ! اگر کمی با طراحی واکنشگرا و ریسپانسیو سایت آشنا باشید اطلاع دارید که برای اعمال دستورات ریسپانسیو روی وب سایت ، لازم است تا در هدر سایت تگی به شکل زیر قرار گیرد که امروزه در تمامی سایت‌ها و ساختار اصلی html5 وجود دارد :
<meta name="viewport" content="width=device-width, initial-scale=1.0">این تگ مسبب اعمال دستورات مدیا در حالت های مختلف است . در داخل دکمه یک صفت بنام onclick تعریف کردیم که داخل آن نیز یک تابع بنام requestDesktopSite وجود دارد و اکنون باید برای این تابع چندخط کد بنویسیم چراکه طبق دستوری که نوشتیم مشخص کردیم که وقتی روی دکمه کلیک شد ، این تابع فراخوانی شده و طبق آن اتفاقاتی رخ دهد ! اما خب لازم است تا دستورات این تابع نیز نوشته شود . در ادامه یک دستور جاوا اسکریپتی را باید در انتهای فایل html خودتان قرار دهید که به شکل زیر خواهد بود :
<script>
function requestDesktopSite() {
document.getElementsByTagName('meta')['viewport'].content='width= 1440px;';
}
</script>طبق این دستور ، تابع requestDesktopSite ابتدا به سراغ متا تگی که بصورت viewport است خواهد رفت و سپس عرض محتوای صفحه را برابر 1440 قرار خواهد داد . به همین سادگی و صرفا با چندخط کد می‌توانید دکمه تغییر نمایش به Desktop Site را برای سایت خودتان ایجاد کنید . توجه داشته باشید که این موارد ازجمله گزینه هایی هستند که برای تمامی وب سایت ها ضروری نیست و طبق تجربه ، بیشتر پایگاه های خبری از این دکمه استفاده می‌کنند تا درصورت نیاز ، کاربر بتواند به جزئیات بیشتری که در حالت موبایل قابل رویت نیست دسترسی داشته باشد .
چه مشکلاتی ممکن است با دکمه Desktop Site داشته باشید
البته این دکمه‌ی طراحی شده تنها بصورت یکطرفه عمل می‌کند و سایت را در از حالت موبایل به حالت دسکتاپ سوئیچ می‌کند و نکته بعدی اینجاست که با رفتن به صفحات دیگری از سایت ، نمایش سایت مجدد به حالت موبایل بازخواهد گشت که باید مجدد بروی دکمه تغییر وضعیت به حالت دسکتاپ کلیک شود تا بتوان سایت را در حالت دسکتاپ مشاهده کرد . اگر در وضعیت دسکتاپ نیز قصد داشتید دوباره به حالت موبایل بازگردید ، باید یکبار صفحه خود را بروز یا اصطلاحا refresh کنید . البته می‌توان توسط یک دستور که وضعیت viewport را در کوکی کاربر ذخیره کرد که کاملا توسط جاوا اسکریپت اجرا شود ، وضعیت را در حالت دسکتاپ نگه داشت ( برای مثلا 1 ساعت ) اما در اینصورت امکان بازگشت به حالت موبایل وجود نخواهد داشت مگر اینکه کاربر کوکی های خود را پاک کرده و یا کوکی مربوط به سایت مربوطه را حذف کند که بتواند مجدد به حالت موبایل بازگردد .
دلیل اینکه نمی‌توان دکمه نمایش به حالت موبایل را در وضعیت دسکتاپ قرار داد این است که در نمایش های دسکتاپ نیازی به دکمه تغییر به وضعیت موبایل نیست و از لحاظ تجربه کاربری یا همان UX نیز انجام این کار و قراردادن چنین دکمه‌ای به هیچ عنوان صحیح نخواهد بود . پس می‌توان با همین حالت که در این مقاله خدمتتان آموزش داده شد ، یک دکمه برای تغییر حالت نمایش به Desktop mode در موارد ضروری طراحی کرد .
