خانه / مطالب وبلاگ سایت / آموزش تست واکنش قالب در مرورگرکروم

آموزش تست واکنش قالب در مرورگرکروم

سلام  ابزار برای تست واکنش گرایی قالب وردپرس روی محیط دسکتاپ

در دنیای مجازی امروز همه به دنبال داشتن سایت هایی هستند که قابلیت نمایش بر روی گوشی تلفن همراه و تبلت را داشته باشد

تا بتوانند در هر زمان و هر جا که هستند ،سایت خود را به نمایش بگذارند و از آن استفاده کنند.

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

برای این منظور ابزارهایی در مرورگرها برای سایت های وردپرسی ساخته شده تا کاربران این سیستم به راحتی بتوانند

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

یا قالبی که بدون نقص می باشد را انتخاب نمایند.

چرا باید وبسایت خود را برای حالت موبایل واکنش گرا کنیم؟

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

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

در مقاله ی امروز به بررسی ۵ ابزار قدرتمند که به شما امکان تست پوسته های وردپرسی را بر بسترهای هوشمند می دهد، می پردازیم.

توسعه ی مرورگرها برای ایجاد محیط تست واکنش گرایی سایت

اگر شما تصور می کنید که مرورگرهای موجود روی محیط دسکتاپ، محلی اشتباه برای توسعه ی سایت های واکنش گراست پیشنهاد میکنیم

کمی بیشتر تفکر و تحقیق کنید! باید به شما بگویم که دو مرورگر کروم و فایرفاکس دارای ابزارهایی هستند که به راحتی می توانید واکنش

گرایی وبسایت وردپرسی را با آن تست نمایید و بر مبنای آن قالب خود را انتخاب کرده و یا طراحی کنید.

در واقع نکته ی جالب و کاربردی که در این ابزارها وجود دارد، این است که در هر گونه گوشی یا تبلت هوشمند با هر اندازه ای قابل تغییر است.

در مرورگر کروم ابزاری با عنوان “Device Mode” و در مرورگر فایرفاکس با عنوان “Responsive Design View” تعبیه شده است.

اگر موافق باشید اول به مرورگر کروم می پردازیم و سپس فایرفاکس را مورد بررسی قرار می دهیم.

Device Mode در مرورگر کروم

برای دسترسی به “Device mode” باید ابزار توسعه دهنده (Developer tools) را در کروم فعال کنید.

برای اینکار می توانید از مسیر Menu > More Tools > Developer Tools این کار را انجام دهید یا به طور جایگزین و میانبر از کلید های Ctrl+Shift+I به طور همزمان استفاده نمایید.

01

 

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

حال در سمت چپ آیکون کوچکی که به شکل موبایل هست را مشاهده می کنید و می توانید بر روی آن کلیک نمایید.

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

02

همانطور که ملاحظه می کنید، وبسایت مورد نظر شما در قاب کوچکی نمایش داده شده و شما می توانید

آن را به اندازه ی هر دستگاهی (تلفن همراه، تبلت و…) کوچک و بزرگ نمایید.

یکی از جالب ترین و بهترین گزینه هایی که در این ابزار موجود است، انتخاب گوشی های مورد نظر از منوی بالایی با عنوان

<Select mode> می باشد. شما از این فهرست میتوانید گوشی مورد نظر خود را انتخاب کنید تا سایت را درون قاب آن به شما نمایش دهد.

( در صورتی که شما سایز و اندازه ی گوشی موبایل را نمی دانید این گزینه بهترین انتخاب است.)

03

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

همانطور که ملاحظه کردید، مرورگر کروم محیطی کاملا شبیه سازی شده از بسترهای iOS و اندروید را اختیار شما قرار می دهد.

خوب دستان در قسمت بعدی آموزش میریم سراغ مرورگر کروم موفق سلامت وتندروست باشدید.

فرادرس

درباره ی زمان الله ابراهیمی

برنامه نویس وب طراحی وب سایت مسلط به HTML5و CSS3تا هوددی به PHPیکم هم جاوا اسکریپت بشتر علاقه به پیشرفت به برنامه های وب

مطلب پیشنهادی

از چه سایتی خرید کنم +فیلم

با سلام به دوستان امروز می پردازم که از چه سایت های خرید کنیم و …


پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

برای دریافت فایل ایمیل خود را وارد کنید .
Your Information will never be shared with any third party.
سلام دوست عزیز کد تخفیف را یاداشت کنید برای خرید خود