نحوه مشاهده نسخه موبایل یک وب سایت در رایانه

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

خوشبختانه، این یک فرآیند نسبتا ساده است. در این مقاله، نحوه مشاهده نسخه موبایل یک وب سایت را در دستگاه ها و مرورگرهای مختلف به شما نشان خواهیم داد.

نحوه مشاهده نسخه موبایل یک وب سایت در کروم در مک

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

همچنین می توانید اندازه صفحه نمایش را متناسب با نیاز خود تغییر دهید و عرض و ارتفاع صفحه را تنظیم کنید تا ببینید وب سایت شما در اندازه های مختلف صفحه چگونه به نظر می رسد. برای انجام این کار در مک، مراحل زیر را دنبال کنید:

1. مرورگر گوگل کروم را راه اندازی کنید و به سایتی که می خواهید مشاهده کنید بروید.
   
2. برای دسترسی به DevTools، F12 را روی صفحه کلید خود بزنید.
   
3. وقتی حالت روشن است، روی نماد «Toggle Device Emulation» کلیک کنید.
   
4. می‌توانید از میان فهرستی از دستگاه‌های iOS و Android، آن‌ها را شبیه‌سازی کنید.
   
5. وب سایت را به شکل تلفن همراهی که انتخاب کرده اید نشان می دهد.
   

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

نحوه مشاهده نسخه موبایل یک وب سایت در کروم در رایانه شخصی ویندوز

اگر می‌خواهید نسخه تلفن همراه یک وب‌سایت را در رایانه شخصی ویندوز کروم مشاهده کنید، این روند تقریباً مشابه است:

1. مرورگر کروم را باز کنید.
   
2. در کروم، به وب‌سایتی که می‌خواهید در نسخه موبایل ببینید بروید.
3. روی صفحه وب کلیک راست کرده و از منو گزینه Inspect را انتخاب کنید.
   
4. برای رفتن به Developer Tools، روی تب More Tools کلیک کنید و Developer Tools را انتخاب کنید یا دکمه F12 را فشار دهید تا DevTools باز شود.
   
5. پنجره Developer Tools باز می شود.
6. روی نماد Device Toggle کلیک کنید تا به حالت نمایش سایت موبایل بروید.
   
7. دستگاه تلفن همراهی را که می خواهید شبیه سازی کنید (اختیاری) انتخاب کنید.
   
8. اکنون می توانید ابعاد صفحه نمایش را متناسب با نیاز خود تغییر دهید.

نحوه مشاهده نسخه موبایل یک وب سایت در کروم در کروم بوک

دسترسی به نسخه موبایل یک وب سایت در کروم با استفاده از کروم بوک بسیار شبیه به دو روش اول است.

1. مرورگر وب گوگل کروم را باز کنید.
   
2. صفحه وبی را که می‌خواهید در دستگاه تلفن همراه خود به آن دسترسی داشته باشید باز کنید.
   
3. برای دسترسی به منو، روی نماد عمودی سه نقطه کلیک کنید.
   
4. ماوس خود را روی مورد More Tools در لیست بکشید.
   
5. «ابزار توسعه‌دهنده» را انتخاب کنید.
   
6. پنجره Developer Tools در مرورگر باز می شود.
   
7. با کلیک کردن روی نماد جابجایی دستگاه، حالت نمایش سایت تلفن همراه را تغییر دهید.
   

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

نحوه مشاهده نسخه موبایل یک وب سایت در فایرفاکس در مک

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

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

1. نسخه موبایلی وب سایتی را که می خواهید ببینید باز کنید.
2. بر روی صفحه وب کلیک راست کرده و گزینه "Inspect" را از منو انتخاب کنید.
   
3. "حالت طراحی پاسخگو" را انتخاب کنید.
   
4. اندازه صفحه نمایش وب سایت را انتخاب کنید.
   

نحوه مشاهده نسخه موبایل یک وب سایت در فایرفاکس در رایانه شخصی ویندوز

رایانه های شخصی ویندوز همچنین دارای گزینه ای برای مشاهده نسخه های موبایلی وب سایت ها با استفاده از فایرفاکس هستند. در اینجا نحوه انجام این کار آمده است:

1. فایرفاکس را روی رایانه شخصی خود راه اندازی کنید.
   
2. به وب‌سایتی که می‌خواهید به عنوان نسخه موبایل ببینید بروید.
   
3. با کلیک بر روی نماد سه نوار افقی به "تنظیمات" بروید.
   
4. یک منوی کشویی خواهید دید که در آن باید گزینه «توسعه‌دهنده وب» را انتخاب کنید.
   
5. "حالت طراحی واکنشگرا" را انتخاب کنید.
   
6. در نهایت، می توانید یک مدل گوشی هوشمند را انتخاب کنید تا ببینید سایت شما در آن دستگاه چگونه ظاهر می شود.
   

نحوه مشاهده نسخه موبایل یک وب سایت در سافاری در مک

ما نحوه مشاهده یک وب سایت تلفن همراه را با استفاده از Chrome و Firefox پوشش داده ایم. اما در مورد مرورگر پیش‌فرض که با دستگاه‌های مک عرضه می‌شود، سافاری چه می‌توان گفت؟ خوشبختانه امکان مشاهده نسخه موبایلی یک وب سایت در سافاری نیز وجود دارد.

1. مرورگر سافاری را راه اندازی کنید.
   
2. به وب‌سایتی که می‌خواهید به‌عنوان نسخه موبایل مشاهده کنید، بروید.
   
3. بر روی "Options" و سپس بر روی منوی "Develop" کلیک کنید.
   
4. از منوی کشویی، «Enter Responsive Design Mode» را انتخاب کنید.
   
5. اکنون می توانید نسخه موبایل وب سایت را مشاهده کنید.
   

سوالات متداول اضافی

آیا می توانم نسخه دسکتاپ یک وب سایت را در تلفن خود مشاهده کنم؟

پاسخ بله است! می‌توانید از نسخه موبایل به نسخه دسکتاپ تغییر دهید تا بدون استفاده از رایانه آن را بررسی کنید. مراحل انتقال نسخه موبایل به نسخه دسکتاپ در کروم به شرح زیر است:

1. به وب سایتی که می خواهید در نمای دسکتاپ ببینید بروید.

2. برای دسترسی به منو، روی نماد سه نقطه ضربه بزنید.

3. اکنون گزینه Desktop View را انتخاب کنید.

به خاطر داشته باشید که این مراحل بسته به تلفنی که استفاده می کنید می تواند متفاوت باشد.

آسان‌تر کردن طراحی وب برای موبایل

ابزارهای توسعه دهنده برای تجزیه و تحلیل و اصلاح نسخه موبایلی یک وب سایت در دسکتاپ بدون تعویض دستگاه عالی هستند. می توانید اندازه صفحه نمایش را تغییر دهید تا نحوه عملکرد اجزا در دستگاه های مختلف را مشاهده کنید. می توانید اجزای مختلف را تنظیم کنید و با استفاده از حالت واکنش گرا، وب سایت را برای اندازه های مختلف صفحه ایجاد کنید.

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

آیا تا به حال سعی کرده اید نسخه موبایلی یک سایت را روی دسکتاپ خود مشاهده کنید؟ برای انجام این کار از کدام مرورگر استفاده کنید؟ در بخش نظرات زیر به ما اطلاع دهید.