Resizer : ابزاری برای تست کردن طراحی Respnsive ( واکنشگرا )

- visibility ۲۰ mode_comment

با سلام خدمت همه دوستان سون لرنی عزیز

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

این ابزار بر روی مرورگرهای Chrome و Safari و Firefox و Opera قابل استفاده است.

info نکته :

برای استفاده ار این ابزار باید به نکات زیر دقت کنید :

  • باید به اینترنت متصل باشید.
  • Javascript نباید در مرورگرتون غیرفعال باشه.

برای استفاده از این ابزار فقط کافیه که لینک زیر رو با ماوستون بگیرین و اونو به نوار بوکمارهاتون درگ ( drag ) کنید و رها کنید تا یک بوکمارک جدید به مرورگرتون اضافه بشه.

↔ Resizer

بعد از انجام این کار چیزی شبیه به زیر رو خواهید دید :

bookmark

خب حالا سایتی رو که میخواین تست کنید در مرورگتون باز کنید و روی بوکمارک Resizer کلیک کنید. با این کار اگر به اینترنت متصل باشید ، بعد از گذشت چند ثانیه به صفحه ای دیگه منتقل میشین که در بالاش یک نوار ابزار تیره رنگ وجود داره مانند عکس زیر :

toolbar

در این نوار ابزار گزینه های زیادی وجود داره که در ادامه در موردشون براتون توضیح میدم.

tool1

  1. ( Auto size ) :  با کلیک بر روی این گزینه سایز موجود بصورت اتوماتیک پیدا میشه و اندازه سایتتون به اندازه اون در میاد.
  2. ( Mobile ) : با کلیک بر روی این گزینه به نمای موبایل میروید. 320x480
  3. ( Mobile ) : یک مقدار از گزینه قبلی بزرگتر است. 320x568
  4. ( Small tablet ) : به اندازه ی تبلت کوچک میشه. 600x800
  5. ( tablet ) : تبلت با اندازه ای بزرگتر. 768x1024
  6. ( Widescreen ) : اندازه 1280x800 خواهد شد
  7. ( HDTV 1080p ) : اندازه 1920x1080 خواهد شد

info نکته :

به این نکته توجه کنید که بار اول که روی هر کدام از این گزینه ها کلیک کنید ، نمای Portrait فعال میشه و با کلیک مجدد روی همان گزینه به نمای Landscape خواهید رفت.

حالا ادامه :

tool2

  1. با این گزینه میتونین هر اندازه ای که دوس داشتین رو وارد کنید. وقتی که شما از یک اندازه ی خاص خیلی استفاده میکنید و در گزینه ها موجود نیس ، میتونین اون اندازه رو وارد کنید و با کلیک بر روی علامت   اونو به دیگر گزینه ها اضافه کنید.
  2. اطلاعاتی در مورد نمایی که در آن هستین به شما میدهد.

و در سمت راست این نوار ابزار :

tool3

  1. بصورت انیمیشنی اندازه سایتتون از بزرگ به کوچک تبدیل میشه و بالعکس.
  2. سایتتون Reload میشه
  3. به نمای پرینت ( print view ) خواهید رفت. ( این امکان بطور کامل فقط برای Safari و Chrome بصورت کامل پشتیبانی میشود. )
  4. اطلاعاتی در اختیار شما قرار میدهد
  5. با کلیک بر روی این گزینه از نمای Test خارج میشوید و نوار ابزار بسته میشود.

برای مطالعه بیشتر میتونین به سایت این ابزار مراجعه کنید.

امیدوارم خوشتون اومده باشه و بدردتون بخوره.

موفق باشید. یا علی

comment دیدگاه کاربران
sabzikamal

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

محمد اسفندیاری

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

وحید صالحی

ممنون
ابزار مفید و کاربردیه دوستان استفاده کنند…

محمد اسفندیاری

لطف داری داش وحید
موفق باشید

Paria RVN

ممنونم ، خیلی کاربردی و مفیده

محمد اسفندیاری

خیلی خوشحالم که بدردتون خورده
در آینده چند ابزار مفید دیگه هم معرفی میکنم
موفق باشید

na3r

مرسی خیلی کاربردی بود ..

محمد اسفندیاری

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

امید داوالا

سلام، من سایتی طراحی کردم که تو سایز widescreen فقط درست نمایش میده، برای اینکه تو تبلت و موبایل هم مناسب بشه باید چکار کنم!؟ (با bootstrap.2 طراحی کردم)
مرسی..

محمد اسفندیاری

با سلام خدمت شما
خیلی راه وجود داره برای واکنشگرا کردن
یکی از راه هاش اینه که از فریم ورکهایی مثل bootstrap استفاده کنیم……در همین سایت آموزش خوبی قرار داده شده است
میتونین به لینک زیر برین و استفاده کنین
http://www.7learn.com/tutorials/design-responsive-theme-by-bootstrap-3-part-1-start

امید داوالا

ممنون از راهنماییتون، محمد آفا 😉 .

محمد اسفندیاری

خواهش میکنم داش امید
موفق باشی 🙂

عالی.

محمد اسفندیاری

موفق باشید….یا علی

علی

عالی بود.
اقا فقط یه سوال اگه کسی ریاضیش ضعیف باشه این سوال امنیتی شمارو چطوری باید جواب بده 🙂

محمد اسفندیاری

کدوم سوال امنیتی؟

علی

این سوال امنیتی برای ارسال نظر 🙂

محمد اسفندیاری

کسی که میاد تو سایت ما ریاضیش دیگه خوبه
مگه نه؟ 😛

علی

خب اقا من برعکسم ! برنامه نویسیم خوبه ریاضیم گنده 🙂 فقط با جاوا مشکل دارم 🙂

محمد اسفندیاری

هر چیزیو که تمرین کنی فول میشی
موفق باشی

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.