نحوه مشاهده نسخه موبایل وب سایت (4 روش)

در این مقاله 4 روش ساده را برای مشاهده نسخه موبایل وب سایت از مرورگر دسکتاپ آموزش خواهیم داد. دو روش اول با هر نوع وب سایتی کار می‌کند، چه وب سایت شما باشد یا سایت شخص دیگری و مهم نیست که با WordPress، Shopify، Wix، Squarespace یا هر چیز دیگری ساخته شده باشد.

دو روش آخر گزینه‌های مخصوص وردپرس هستند که به شما نشان می‌دهند چگونه نسخه موبایل سایت وردپرس خود را مشاهده کنید. این روش‌ها برای مشاهده نسخه موبایل وب سایت فقط در صورتی کار خواهند کرد که خودتان صاحب سایت باشید.

چه مالک وب سایت باشید یا نه، دو راه آسان برای مشاهده نسخه موبایل وب سایت وجود دارد:

1. از ابزارهای توسعه دهنده مرورگر وب خود استفاده کنید. کروم برای این کار بسیار عالی است، اما اکثر مرورگرهای وب ابزارهای مشابهی دیگری را ارائه می‌دهند.
2. از ابزار اختصاصی شبیه‌ساز موبایل استفاده کنید. تنها کاری که انجام می‌دهید این است که URL مورد نظر خود را وارد کنید، سپس می‌توانید مانند یک کاربر تلفن همراه آن را مرور کنید.

• آموزش 0 تا 100 تنظیمات رنک مث (RankMath)
• 5 روش برای مخفی کردن صفحات وردپرس از نتایج گوگل
• رفع خطای “یک خطای مهم در این وب سایت وجود داشت” در وردپرس

اکثر مرورگرهایی مانند گوگل کروم، سافاری، فایرفاکس، مایکروسافت و بریو ابزارهای توسعه دهنده‌ای را ارائه می‌دهند که به شما امکان می‌دهد یک وب سایت را جستجو کنید و ظاهر آن در دستگاه‌های مختلف مشاهده نمایید. با کمک این ابزارهای توسعه‌دهنده، می‌توانید به سرعت ببینید که یک وب‌سایت در گوشی‌های هوشمند، تبلت‌ها و غیره مختلف چگونه به نظر می‌رسد.

برای این مثال‌ها، فرض می‌کنیم که از Chrome (یا هر مرورگر مبتنی بر Chromium، مانند Brave) استفاده می‌کنید. با این حال، اکثر مرورگرهای وب دیگر ویژگی‌های مشابهی را ارائه می‌دهند، اگرچه رابط کاربری متفاوت خواهد بود. برای شروع، روی قسمت جلویی وب سایت خود کلیک راست کرده و Inspect را از منو انتخاب کنید:

با کلیک بر روی آن، ابزارهای توسعه دهنده راه‌اندازی شده و یک ماژول در سمت راست با عناصر کدنویسی از آن صفحه نشان می‌دهد.

لازم نیست نگران کدنویسی باشید، زیرا هدف اصلی تغییر به مشاهده نسخه موبایل وب سایت است. دکمه کوچک Toggle Device Toolbar را پیدا کنید (نماد تلفن و تبلت است) و روی آن کلیک کنید تا نمای تلفن همراه فعال شود.

این گزینه به طور خودکار نمایی از تلفن همراه را نشان می‌دهد، که در آن می‌توانید ابعاد دستگاه را بر اساس دستگاهی که می‌خواهید شبیه سازی کنید تغییر دهید:

این روش گزینه‌هایی دارد که پیش‌فرض‌های دستگاه داخلی داشته و نمای دقیق‌تری از نحوه نمایش وب‌سایت شما در دستگاه‌های دنیای واقعی ارائه می‌کند.

به عنوان مثال، می‌توانید یک iPad Pro را انتخاب کنید و فوراً ابعاد نمایشگر را با ابعاد یک iPad Pro تنظیم کنید. یا می‌توانید Pixel 2 XL که ابعاد کوچکتری دارد را انتخاب کنید. یا حتی کوچکتر از آن که Galaxy Fold است. هر یک از دستگاه‌های موجود در لیست را آزمایش کنید و مطمئن شوید که وب سایت شما در هر کدام قابل قبول به نظر می‌رسد.

شبیه سازها معمولاً برای آزمایش برنامه ها در محیط‌های بومی استفاده می‌شوند، اما بسیاری از آن‌ها برای پاسخگویی وب سایت نیز در دسترس هستند. همچنین می‌توانید آزمایش‌کنندگان اصلی را به‌صورت آنلاین پیدا کنید تا در URL خود جای‌گذاری کنند و ببینید در دستگاه‌های کوچک‌تر چگونه به نظر می‌رسد.

Website Responsive Testing Tool یک گزینه مناسب برای مشاهده نسخه موبایل وب سایت است. این ابزار کنترل بسیار بیشتری بر ابعاد سایت به شما داده و اغلب ساده‌تر از استفاده از ابزارهای توسعه دهنده مرورگر شما هستند.

به عنوان مثال، ابزار تست پاسخگو را در نظر بگیرید: به سایت می‌روید، URL را جایگذاری می‌کنید و بلافاصله نسخه موبایل را می‌بینید. می‌توانید سایت خود را برای تعداد زیادی نسخه موبایل و اندازه صفحه آزمایش کنید.

همچنین به شما امکان را می‌دهد که عرض، ارتفاع و دید نوار اسکرول را تنظیم کنید. حتی می‌توانید نسخه موبایل سایت خود را نشانه گذاری کنید تا در آینده دوباره آن را به سرعت بررسی کنید.

اگر بر روی سایت وردپرس خود کار می‌کنید، وردپرس همچنین گزینه‌های داخلی را برای کمک به شما ارائه می‌دهد تا ببینید سایت شما در دستگاه‌های تلفن همراه چگونه به نظر می‌رسد.

هنگامی که در ویرایشگر وردپرس کار می‌کنید، می‌توانید به سرعت مشاهده کنید که محتوای شما در دستگاه‌های مختلف چگونه به نظر می‌رسد. شما همچنین می‌توانید همین کار را هنگام سفارشی سازی تم خود در Customizer WordPress انجام دهید.

شما می‌توانید نسخه موبایل یک وب سایت را به صورت صفحه به صفحه مشاهده کنید. به عنوان مثال، ممکن است بخواهید ببینید که آیا پست وبلاگ فعلی شما در نمای موبایلی قابل ارائه به نظر می‌رسد یا خیر. همچنین عاقلانه است که صفحه اصلی خود را به خصوص پس از تغییر طراحی، برای پاسخگویی تلفن همراه بررسی کنید.

بیایید با صفحه اصلی شروع کنیم. در اینجا وب سایت زیر از نمای دسکتاپ به نظر می‌رسد:

با رفتن به برگه‌های Posts یا Pages در داشبورد وردپرس، می‌توانید صفحات تکی و پست‌های تلفن همراه را مشاهده کنید.

برای پست‌ها و صفحاتی که قبلا ایجاد شده‌اند، به همه پست‌ها یا همه صفحات بروید.

در اینجا با صفحه اصلی شروع می‌کنیم؛ هر صفحه‌ای را که می خواهید می‌توانید انتخاب کنید.

هر صفحه و پست در باطن وردپرس یک پیوند پیش نمایش در گوشه سمت راست بالا ارائه می‌دهد. برای نمایش یک منوی کشویی با این گزینه‌ها، آن دکمه پیش نمایش را انتخاب کنید:

• دسکتاپ
• تبلت
• سایر

توجه داشته باشید که به طور پیش فرض، وردپرس نسخه دسکتاپ را نشان می‌دهد.

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

کمی وقت بگذارید و صفحه را به پایین اسکرول کنید تا همه محتوا را بررسی کنید. برای مثال این سایت، چندین محصول تجارت الکترونیک را با تصاویر، نام محصولات و دکمه‌های افزودن به سبد خرید در صفحه اصلی فهرست می‌کند. ممکن است ما بخواهیم به دو یا سه ستون محصول تغییر دهیم تا جزئیات محصول بزرگتر شود.

پست‌ها هنگام استفاده از این روش تفاوتی ندارند. آن‌ها به سادگی در یک بخش جداگانه از وردپرس (Posts → All Posts) قرار دارند.

با توجه به اینکه چگونه این پست‌ها حاوی پست‌های وبلاگ شما هستند و صفحات وب ثابت نیستند، آزمایش دوستی تلفن همراه مهم‌تر استۀ، زیرا بسیاری از شرکت ها هر ماه ده‌ها پست وبلاگ را تنها با به روز رسانی های جزئی در صفحات منتشر می‌کنند. اگر وبلاگ منبع اصلی محتوای شماست، باید مطمئن شوید که هر یک از آن‌ها قبل از انتشار برای موبایل آماده هستند. طبق معمول، به قسمت Preview بروید، سپس بر روی تبلت یا موبایل کلیک کنید.

نمای دسکتاپ گاهی اوقات بسیار شبیه به نمای تبلت است، بنابراین مطمئن شوید که در مرورگر خود زوم نکرده‌اید.

نمای تبلت تا حدودی کوچکتر از نمای دسکتاپ به نظر می‌رسد، اما با فضای سیاه در اطراف محتوای سایت، شبیه به اندازه واقعی تبلت است.

سفارشی ساز وردپرس نه تنها راه‌های بسیار خوبی برای ویرایش تم وردپرس برای شما فراهم می‌کند، بلکه پیش نمایشی بصری از سایت شما در حین انجام ویرایش‌ها دارد.

خوشبختانه، سفارشی ساز وردپرس فقط شما را به پیش نمایش دسکتاپ محدود نمی‌کند. در واقع، این امکان وجود دارد که تمام ویرایش های خود را در حالی که به نمای تلفن همراه یا تبلت نگاه می‌کنید، تکمیل کنید. برای انجام این کار، به Appearance → Customize بروید تا Customizer راه‌اندازی شود.

به‌طور پیش‌فرض، در نمای دسکتاپ Customizer در سمت چپ و پیش نمایش سایت در سمت راست قرار دارد.

به انتهای لیست تنظیمات نگاه کنید تا سه نماد دکمه را پیدا کنید: یکی برای نمای دسکتاپ، دیگری برای نمای تبلت و سومی برای نمای موبایل.

روی دکمه نمایش تبلت کلیک کنید تا ببینید چگونه ویرایش های فعلی شما در رابطی به اندازه یک تبلت معمولی نشان داده می شود. دکمه Mobile View این رابط را کوچکتر می‎‌کند و شما را به اندازه پنجره استاندارد یک گوشی هوشمند موبایل نزدیک می‌کند.

توجه: به خاطر داشته باشید که این پیش‌نمایش‌های باطنی تلفن همراه تخمینی هستند. با انواع مختلف دستگاه در جهان، هیچ کس دقیقاً همان چیزی را نخواهد دید.

منوها را فراموش نکنید منوها در دستگاه‌های تلفن همراه بسیار مشکل ساز هستند. بررسی کنید که آیا توسعه‌دهنده تم آزمایش‌های قابل توجهی انجام داده است یا خیر. متوجه خواهید شد که منوی تلفن همراه معمولاً در یک منوی همبرگر مخفی (سه خط افقی) قرار می‌گیرد و ممکن است در نهایت با دو منو روبرو شوید (مانند نحوه ارائه دکمه‌های تجارت الکترونیک در پایین صفحه).

کل وب‌سایت خود را از صفحات محصول گرفته تا پست‌های وبلاگ، و سبد خرید تا صفحات درباره ما در نمای تبلت می‌توانید اجرا کنید. همین فرآیند را در نمای موبایل نیز می‌توانید انجام دهید.

در این مقاله، چهار روش را در مورد مشاهده نسخه موبایل وب سایت بررسی کردیم. منعطف‌ترین و بهترین گزینه برای مشاهده نسخه موبایل وب سایت استفاده از ابزارهای توسعه دهنده مرورگرتان است. زمانی که نسخه دسکتاپ وب سایت را باز کردید، می‌توانید نسخه موبایل را با استفاده از ابزارهای توسعه دهنده پیش نمایش کنید. امیدواریم این مطلب برای شما مفید بوده باشد.