این آموزش در تاریخ ۱۴۰۰/۰۵/۲۸ آپدیت شده است.
نحوه تست واکنش گرایی یک صفحه
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با نحوه تست واکنش گرایی یک صفحه با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه تست واکنش گرایی یک صفحه
خب ما چجوری میتونیم متوجه شیم که مثلا یک صفحه یا یه سایت واکنش گرا هست، حالا یا خودمون یه صفحه رو واکنش گرا کرده ایم و یا اصلا شاید بخوایم یک سایت یا یک صفحه رو تست بزنیم ببینیم آیا اون صفحه یا سایت واکنش گرا هست یا نه.
خب ما برای اینکه بتونیم واکنش گرایی یه صفحه رو تست بزنیم از روش های مختلفی میشه استفاده کرد، یعنی از داخل خوده مرورگر بگیرید تا ابزارهای آنلاین که برای اینکار ایجاد شده اند ، در ادامه میریم تا با انواع روش های تست واکنش گرایی صفحات وب آشنا بشیم، لطفا با من همراه باشید.
Free-Learn
تست با استفاده از خوده گوشی های موبایل یا دیگر دستگاها
تو این روش ما باید صفحه یا سایت رو روی گوشی های موبایل بصورت دستی تست بزنیم ، یعنی باید با گوشی اون سایت یا صفحه رو باز کنیم و ببینیم آیا واکنش گراست یا نه.
اگه عناصر ریز و کوچک افتادن پس یعنی واکنش گرا نیست ( یا ممکنه عناصر واکنش گرا باشن ولی خب احتمالا از متای viewport در اون صفحه استفاده نشده ) ، ولی اگه عناصر در اندازه واقعی خودشون نمایش داده بشن این یعنی اون صفحه وب واکنش گراست، لطفا به تصاویر زیر توجه نمایید :
خب اگه یه سایت باشه که خب حالا میگیم راحتتره ، با گوشی میریم و وارد سایت میشیم و دیگه مشخص میشه که واکنش گراست یا نه ، ولی اگه سایت نبود و صرفا یه صفحه بود که روی سیستم شخصی خودمون هست باید چکار کنیم؟
طبیعتا باید اون صفحه رو بصورت دستی انتقال بدیم روی گوشی موبایل و بعدش دیگه هی روی گوشی موبایل واکنش گرا بودنشو تست بزنیم، بعد اگه مثلا تغییراتی در فایل ایجاد کردیم باز دوباره باید انتقال بدیم و دوباره تست بزنیم و همینطور تا …
این روش خب روش بهینه ای نیست ، یعنی سرعت کارتون تو این روش خیلی پایین میاد و از این بابت خب روش بهینه ای نیست و یجورایی این روش ، یه روش قدیمی هست.
Free-Learn
تست با استفاده از زوم کردن در مرورگر
تو این روش کار خاصی لازم نیست انجام بدید ولی خب روش آنچنان بهینه ای هم نیست ، این روش واکنش گرایی در معنایی واقعی رو نمیتونه ایجاد کنه ولی خب باز در برخی موارد بدرد میخوره و میتونه کارمون رو راه بندازه.
خیلی راحت اون صفحه یا سایتی که در مرورگر باز کرده ایم رو روش زوم میکنیم، هم در مرورگر موزیلا فایرفاکس و هم گوگل کروم برای زوم کردن از کلیدهای ترکیبی ctrl و + از روی صفحه کلید میتونید صفحه رو بزرگ نمایی ( زوم ) یا با استفاده از ctrl و – صفحه رو کوچک نمایی کنید.
این روش ، روش بهینه ای نیست و نباید بهش اعتماد کنید چون در برخی موارد کلا جواب نمیده.
Free-Learn
تست با استفاده از سایت / ابزارهای آنلاین
خب دوستان در ادامه آموزش نحوه تست واکنش گرایی یک صفحه وب میخوایم در این روش یاد بگیریم که چگونه میشه با استفاده از سایت ها یا ابزارهای آنلاین تست واکنش گرایی یک سایت رو زد.
این روش نسبت به روش های قبلی طبیعتا خیلی بهتر و بهینه تره ، سایت ها و ابزارهای مختلفی برای اینکار وجود دارند، کافیه یه سرچ بزنید با عنوان Test Responsive Website کلی سایت و ابزار میاره بالا که میشه باهاشون تست واکنش گرایی رو انجام داد.
در این روش معمولا باید سایتتون یا سایتی که میخواید تست واکنش گرایشو بزنید حتما آنلاین ( یعنی تو فضای اینترنت باشه ) نکه مثلا یه صفحه باشه تو سیستم شخصی خودتون ، باید حتما آنلاین باشه.
Free-Learn
تست با استفاده از ابزار خوده مرورگرها
اکثر مرورگرها داخل خودشون یه امکان ( ویژگی ) یا ابزاری رو ایجاد کردند که به راحتی میشه باهاش تست واکنش گرایی رو زد، حالا میخواد سایت آنلاین باشه یا یه صفحه تو سیستم خودتون ، فرقی نمیکنه.
این روش بهترین و کاملترین و قابل اعتمادترین روش برای تست واکنش گرایی سایت یا صفحات وب می باشد، بهتره و پیشنهاد میکنم از این روش استفاده نمایید.
- در مرورگر موزیلا فایرفاکس
از منوی اصلی بروی گزینه Tools کلیک و سپس از قسمت Web Developer گزینه ی Responsive Design Mode را انتخاب نمایید. یا هم از کلیدهای میانبر Ctrl + Shift + M استفاده نمایید.
- در مرورگر گوگل کروم
در این مرورگر بروی دکمه F12 کلیک نمایید ، یک پنجره براتون باز میشه بعد همانند تصویر زیر میتونید به قسمت تست واکنش گرایی دسترسی پیدا کنید.
